关于js中的鼠标事件总结
js中鼠标事件主要有onclick，onmousedown，onmouseup，oncontextmenu，ondblclick,所有的这些事件都包含有一个事件对象event，当然在IE低版本下，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级方式添加事件
事件监听主要接受三个参数，事件类型，事件需要执行的函数，是否冒泡，默认情况下是允许冒泡的
document.addEventListener('click',function( ){ },true)
以上是关于事件添加的三种方式，通过DOM0级方式添加事件有一个缺点就是当添加同一个事件是，后写的会把先写的给覆盖掉，但是通过DOM2级方式添加的相同事件是不会覆盖前面的事件的。同时，需要注意的是通过DOM2级添加的事件类型前面是没有‘on'的，接着就是如果要移除事件的话，DOM0级直接让事件为null就能清除事件，但是如果是DOM2级添加的函数是匿名函数，通过removeEventListener（）方法是没办法移除的，因为两者指向的不是同一个函数，如果要移除，请记得使用有名函数。关于最后一个参数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中的鼠标事件总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了如何使用JavaScript+CSS实现一个随机颜色生成器，文中的示例代码讲解详细，感兴趣的小伙伴可以动手尝试一下2022-08-08
这篇文章主要介绍了javascript数组克隆简单实现方法,实例分析了JavaScript中concat用于数组克隆的使用技巧,需要的朋友可以参考下2015-12-12
这篇文章主要给大家介绍了关于如何利用d3.js实现蜂巢图表带动画效果的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用d3.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
这篇文章主要介绍了JS+CSS实现的竖向简洁折叠菜单效果代码,涉及JavaScript链式操作与元素遍历等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
在通过Javascript实现客户端和服务端的交互时，有时候需要对操作系统进行判断，以便实现不同操作系统下的兼容性;从而实现网站在跨平台浏览时候保持良好的用户体验,感兴趣的朋友可以了解下啊，或许对你有所帮助2013-01-01![js模式化窗口问题![window.dialogArguments]](//img.jbzj.com/images/xgimg/bcimg5.png)
js模式化窗口问题![window.dialogArguments]
这篇文章主要介绍了js模式化窗口问题![window.dialogArguments],需要的朋友可以参考下2016-10-10
这篇文章主要介绍了JS简单实现无缝滚动效果,结合完整实例形式分析了javascript实现图片无缝滚动效果的实现技巧,涉及javascript结合时间函数定时触发动态修改页面元素属性的相关操作方法,需要的朋友可以参考下2016-08-08
这篇文章主要为大家详细介绍了基于canvas实现超炫酷的流水灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
Javascript原生的String处理函数显得很不够丰富2010-04-04
这篇文章主要介绍了JS字符串常用操作方法,结合实例形式总结分析了javascript字符串获取、返回、拼接、替换、搜索、计算等相关操作技巧,需要的朋友可以参考下2019-06-06
![js模式化窗口问题![window.dialogArguments]](http://img.jbzj.com/images/xgimg/bcimg5.png)
最新评论