对于input输入框,mousedown、mouseup、click和focus事件的发生顺序

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sinat_36521655/article/details/82227498

今天拼多多笔试遇到了这道题,对于点击事件,是按照mousedown -> mouseup -> click这个顺序走的,但是focus事件的顺序就不清楚了,当时凭直觉选了mousedown -> focus -> mouseup -> click这个答案,笔试完成后,测试了一波,发现男人的直觉有时还是可信的。

哈哈哈,当然是开个玩笑,不了解的地方还是需要去验证的。

下面是测试代码

<!doctype html>
<html>
<head>
</head>
<body>
    <input type="text" id="test" />
    <script>
        var input = document.getElementById("test");
        addListener(input, "mousedown", function() {
            console.log("mousedown");
        });
        addListener(input, "mouseup", function() {
            console.log("mouseup");
        });
        addListener(input, "click", function() {
            console.log("click");
        });
        addListener(input, "focus", function() {
            console.log("focus");
        });
        
        function addListener(dom, event, func) {
            if(dom.addEventListener) {
                dom.addEventListener(event, func);
            } else if(dom.attachEvent) {
                dom.attachEvent("on"+event, func);
            } else {
                dom["on"+event] = func;
            }
        }

    </script>
</body>
</html>

结果如下:

 

展开阅读全文

没有更多推荐了,返回首页