Js操作鼠标事件的流程

在实际项目里我们常常都需要用javascript操作鼠标事件是，那么今天就来给大家详细的说一下JS操作鼠标事件的流程，怎么使用JS操作鼠标事件。

注意onmouseover、onmouseout是只执行一次的，二onmousemove是执行多次的

Onmousedown也是只执行一次，每次点击才执行一次，不会持续触发，与onkeydown、onkeypress不同，这里是很乱的，鼠标事件到底有哪些？？？

在火狐中显示是undefined

在ie中显示是undefined

但是上面的在谷歌中显示都是正常的，现在需要的做一个兼容，兼容IE与火狐

这里是有一个疑问的，单独的console.log(window)，在其中看到的event属性是undefined，但是consoe.log(window.event)，时显示的却是自己想要的效果，为什么会有这样的区别呢？

这是老师纠结的地方，但是我不知道到底是为啥这样

上面的分析是有错误的，在谷歌中，e与window.event都是支持的，火狐只支持e,谷歌只支持window.event

传参与动态创建属性

由于e.pageX和e.pageY这个属性在IE低版本不支持，（在IE低版本中显示是）所以利用可视区鼠标位置+滚动条卷曲高度来实现获取基于内容区的鼠标位置

Document上面的是window

事件捕获只是了解内容，在IE中不支持

事件处理函数，注意0级事件后面的事件是会覆盖前面的事件，这是很重要的

Window是可以省略的，上面的代码没什么意义

冒泡：从具体节点到不具体节点

现在代表的是捕获，但是没什么具体的效果，现在和冒泡是一样的

捕获：从不具体节点到具体节点

实现与函数执行上下文一样的效果，addEventListener()在IE浏览器中不支持

上面是卸载DOM 0级事件的方法（卸载事件，若界面再次刷新的话，还是会继续执行该事件处理函数）

其实和卸载DOM0级事件是一样的效果

IE添加DOM2级事件

在IE最新版本IE11已经是不支持attachEvent这个属性

IE卸载DOM2级事件

下面是封装函数：

这种写法在IE中显示为空

这种写法在非IE中是会直接报错

非IE中显示是一个函数，IE中显示是undefined,下面的函数封装就是根据这样的原理来进行

由于事件捕获是很少使用到的，所以第四个值通常都是false，不用单独的传参，直接写死

在卸载时，不能在事件处理函数中使用匿名函数

注意在IE版本中的执行顺序

DOMContentLoaded现在是了解内容，注意一个概念：事件处理函数

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关文章