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

最新推荐文章于 2024-01-23 16:56:48 发布

coder_xsy

最新推荐文章于 2024-01-23 16:56:48 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascripts onclick

本文链接：https://blog.youkuaiyun.com/xiongshiyuan/article/details/79811260

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

测试结果：