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>

测试结果：

您可能感兴趣的与本文相关的镜像

Dify

AI应用

Agent编排

Dify 是一款开源的大语言模型（LLM）应用开发平台，它结合了后端即服务(Backend as a Service) 和LLMOps 的理念，让开发者能快速、高效地构建和部署生产级的生成式AI应用。它提供了包含模型兼容支持、Prompt 编排界面、RAG 引擎、Agent 框架、工作流编排等核心技术栈，并且提供了易用的界面和API，让技术和非技术人员都能参与到AI应用的开发过程中