JavaScript 鼠标事件处理与添加方式详解

JavaScript鼠标事件概述

JavaScript中的鼠标事件主要涵盖onclick、onmousedown、onmouseup、oncontextmenu以及ondblclick等类型。这些事件在触发时均会包含一个事件对象event。需要注意的是，在低版本Internet Explorer浏览器中，event对象并非直接挂载在事件目标上，而是挂在window对象下，这一差异将在后续讨论中详细说明。

事件绑定的三种方式

1.通过html添加事件

<input type="button" click="alert(1)"/>

2.通过DOM0级方式添加事件

<input type="button" value="点击"/>
<script>
  var btn=document.getElementsByTagName('input')[0];
  btn.onclick=function(){
     alert(1);
}
</script>

3.通过DOM2级方式添加事件

DOM2级事件监听机制与注意事项

事件监听器主要接收三个参数：事件类型、执行函数以及是否冒泡。默认情况下，事件是允许冒泡的。

document.addEventListener('click',function( ){ },true)

上述三种方式中，DOM0级方式存在一个显著缺点：若对同一事件多次绑定，后绑定的函数会覆盖先前的函数。相比之下，通过DOM2级方式添加的相同事件不会相互覆盖。此外，通过DOM2级添加的事件类型名称前不包含“on”前缀。关于事件移除，DOM0级只需将事件属性设为null即可清除；但若使用DOM2级添加的是匿名函数，则无法通过removeEventListener()移除，因为两者指向不同的函数引用。因此，若需移除DOM2级事件，务必使用有名函数。最后一个参数为true时代表冒泡阶段，为false时代表捕获阶段。

鼠标事件对象属性与浏览器兼容性

/* * 当触发onclick事件时，console.log(ev.which)，鼠标左键的which值为1 * 当触发oncontextmenue时，鼠标的右键值为3，不会触发onclick事件 * 当mousewheel时，鼠标的中键键值为0 * 当document.down时，可以根据按键的不同，从左到右鼠标键值依次为1,2,3 * 在chrome底下，查看ev.wheelDelta，向上是120，向下是-120 * 在FirFox底下，通过addEventListenner()来给鼠标添加滚轮事件，事件类型是DOMMouseScroll，查看是使用ev.detail * 向上是3，向下是-3 *

以上这篇关于js中的鼠标事件总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。