点击一个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>

结果如下: