点击一个Input事件后,发生了什么

之前在使用draft.js作为富文本编辑处理的时候,想要自己手动触发draft.js的focus.在click和mousedown事件中手动触发都会出线光标移动的情况。后面看了源码,才知道内部是监听了mouseup的事件手动触发focus的。瞬间就去了解点击一个input的背后,事件触发的顺序。

代码如下:

<body>
<input type="text" placeholder="test">
<script>
const input = document.querySelector('input')
input.onmouseover = function(){
console.log('mouseover')
}
input.onmousedown = function(){
console.log('mousedown')
}
input.onfocus = function() {
console.log('focus')
}
input.onmouseup = function() {
console.log('mouseup')
}
input.onclick = function() {
console.log('click')
}
</script>
</body>

结果如下: