mousedown mouseup focus click事件的触发顺序测试

最新推荐文章于 2024-06-18 17:37:41 发布

原创最新推荐文章于 2024-06-18 17:37:41 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascripts #onclick

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文通过一个简单的HTML页面示例，展示了mousedown、mouseup、click及focus等事件的触发顺序，并使用JavaScript来动态记录这些事件的发生过程。

部署运行你感兴趣的模型镜像

<!doctype html>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <a id="link" href="#">点击一下进行测试</a>
        <ul id="tip">
            <li>显示mousedown mouseup click focus事件的触发顺序</li>
        </ul>
        
        <script type="text/javascript">
                var a=document.getElementById("link");
                a.onclick=function(){
                    var newele=document.createElement("li");
                    newele.innerText="onclick";
                    var ele=document.getElementById("tip");
                    ele.appendChild(newele);
                };
                a.onfocus=function(){
                    var newele=document.createElement("li");
                    newele.innerText="onfocus";
                    var ele=document.getElementById("tip");
                    ele.appendChild(newele);
                };
                a.onmousedown=function(){
                    var newele=document.createElement("li");
                    newele.innerText="onmousedown";
                    var ele=document.getElementById("tip");
                    ele.appendChild(newele);
                };
                a.onmouseup=function(){
                    var newele=document.createElement("li");
                    newele.innerText="onmouseup";
                    var ele=document.getElementById("tip");
                    ele.appendChild(newele);
                };
              
        </script>
    </body>
</html>