JavaScript常用的click事件总结分享

上面的代码中，我们在元素上绑定了onclick、ondblclick、onmousedown、onmouseup四个事件。

然后点击

元素，控制台会依次输出mousedown、mouseup、click。

如果双击

元素，控制台会依次输出mousedown、mouseup、click、mousedown、mouseup、click、dblclick。

所以事件触发的先后顺序是onmousedown、onmouseup、onclick、ondblclick。

所以呢在使用onclick事件的时候，如果绑定了多个和鼠标按键相关的事件，那么就需要注意事件处理的逻辑，避免出现一些意想不到的问题。

事件对象

在onclick事件中，我们可以通过event参数来获取事件对象，事件对象中包含了事件的相关信息。

事件对象event是MouseEvent的实例，它继承了UIEvent和Event，所以事件对象中包含了UIEvent和Event的所有属性和方法。

MouseEvent的属性：

MouseEvent的方法：

getModifierState(): 返回一个布尔值，表示是否按下了指定的键。

initMouseEvent(): 初始化事件对象。

preventDefault(): 阻止事件的默认行为。

stopImmediatePropagation(): 阻止事件向上冒泡，并阻止事件的进一步捕获或冒泡。

stopPropagation(): 阻止事件向上冒泡。

click事件注册的方式

click事件可以通过onclick属性、addEventListener()方法和attachEvent()方法注册。

onclick属性

onclick属性是Element的一个属性，它的值是一个函数，当click事件触发时，会执行这个函数。

click登录后复制

addEventListener()

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

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

attachEvent()

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

click<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中文网其它相关文章！