>首页> IT >

JavaScript常用的click事件总结分享

时间:2022-10-11 15:44:59       来源:转载
本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于常用的click时间的相关内容，包括了onclick异步性、同步性、事件触发的先后顺序以及时间注册等内容，下面一起来看一下，希望对大家有帮助。


(资料图片)

【相关推荐：JavaScript视频教程、web前端】

onclick简介

onclick是HTML中的一个事件属性，它的作用是当用户点击元素时触发的事件。

onclick事件可以绑定在任何元素上，比如

、<script> document.getElementById("btn").onclick = function () { console.log("click"); } console.log("start"); for (var i = 0; i < 1000000000; i++) ; console.log("end");</script>登录后复制

上面的代码中，我们在<script> document.getElementById("btn").onclick = function () { console.log("click"); } for (var i = 0; i < 10; i++) { console.log(i); if (i === 5) { document.getElementById("btn").click(); } }</script>登录后复制

上面的代码中，控制台输出到5的时候，我们手动触发了onclick事件，这个时候控制台会输出click

，然后继续输出后面的，这个就说明了onclick同步性。

查阅了相关资料，如果onclick事件是由用户手动触发的，那么onclick事件是异步的，会压入事件队列中，如果onclick

事件是由JavaScript代码触发的，那么onclick事件是同步的，会立即执行。

onclick的触发顺序

onclick事件的触发顺序是先捕获后冒泡，也就是说先触发捕获事件，然后触发冒泡事件。

        onclick
    
        
                    
    
<script>    document.getElementById("div1").onclick = function () {        console.log("div1");    }    document.getElementById("div2").onclick = function () {        console.log("div2");    }    document.getElementById("div3").onclick = function () {        console.log("div3");    }    document.getElementById("btn").onclick = function () {        console.log("btn");    }</script>
登录后复制

上面的代码中，我们在

元素和<script> document.getElementById("btn").onclick = function () { console.log("click"); } document.getElementById("btn").ondblclick = function () { console.log("dblclick"); } document.getElementById("btn").onmousedown = function () { console.log("mousedown"); } document.getElementById("btn").onmouseup = function () { console.log("mouseup"); }</script>登录后复制

上面的代码中，我们在登录后复制

addEventListener()

addEventListener()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数，第三个参数是一个布尔值，表示是否在捕获阶段触发事件处理函数。

<script>  var btn = document.getElementById("btn");  btn.addEventListener("click", function() {    console.log("click");  });</script>
登录后复制

attachEvent()

attachEvent()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数。

<script>  var btn = document.getElementById("btn");  btn.attachEvent("onclick", function() {    console.log("click");  });</script>
登录后复制

结语

click事件是鼠标点击事件，它是MouseEvent的一个实例，它的事件类型是click，它可以通过onclick属性、addEventListener()方法和attachEvent()方法注册。

【相关推荐：JavaScript视频教程、web前端】

以上就是JavaScript常用的click事件总结分享的详细内容，更多请关注php中文网其它相关文章！

关键词： 事件对象 这个时候 事件处理

返回首页 返回频道
相关新闻
新闻热点
奇闻趣事
  1. 小米12系列一大一小双旗舰 卢伟冰：向苹果学习，但仍有差距 小米12系列一大一小双旗舰 卢伟冰：向苹果学习，但仍有差距
  2. 腾讯光子工作室研发！雪中悍刀行手游今日正式官宣 腾讯光子工作室研发！雪中悍刀行手游今日正式官宣
  3. 听力下降别再甩锅耳机 耳机使用中的三个伤耳习惯 听力下降别再甩锅耳机 耳机使用中的三个伤耳习惯
  4. 支付宝蚂蚁森林回应为什么一直不见沙柳？今天上沙柳！ 支付宝蚂蚁森林回应为什么一直不见沙柳？今天上沙柳！
  5. Adobe Photoshop Camera要来了？App Store预计4月14日发行 Adobe Photoshop Camera要来了？App Store预计4月14日发行
  6. 一图看懂荣耀30S：麒麟820+6400万全焦段AI四摄 一图看懂荣耀30S：麒麟820+6400万全焦段AI四摄
频道推荐
返回网站首页 返回频道首页
Copyright 2015-2020   三好互联网  版权所有        联系邮箱：435 22 640@qq.com  备案号： 京ICP备2022022245号-21