js二级事件模型的处理细节

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、纠正网络上的一个误传--“IE不支持事件捕获”

可以在浏览器中运行上面demo，在各主流浏览器中，鼠标移上都可以分别触发捕获与冒泡事件的监听函数，所以IE也是支持事件捕获的，连IE6都支持，只是在命中元素上事件的触发的顺序会稍有区别，参见下条。

二、在命中元素上冒泡和捕获的执行顺序

命中元素上事件冒泡和捕获的触发顺序在不同浏览器中的顺序稍有区别，在IE6-8中是先触发捕获再触发冒泡，在IE9及以上、chrome、firefox等浏览器是先触发冒泡再触发捕获

三、事件的浏览器兼容方面的东西

浏览器\区别	添加监听	事件名	移除监听	仅阻止事件冒泡
IE6-8	attachEvent	标准事件名+on，如onclick、onmouseover	detachEvent	e = e \|\| window.event;e.cancelBubble = true;
IE9及以上，chrome等	addEventListener	事件名，如click、mouseover	removeEventListener	e = e \|\| window.event;e.stopPropagation();

四、事件中的元素关系

获取触发事件监听函数的的元素可以用下面的方法做到浏览器兼容

var evt = e || window.event;
var eventSrc = evt.target||evt.srcElement;

mouseover、mouseout、mousemove等事件还支持fromElement与toElement（IE6也同样支持），表示鼠标从一元素移到另一元素。鼠标的移入移出存在边界整齐对其的情况，此情况下事件会直接跳过那些被遮盖的元素，直接反应鼠标的移入移出元素。另外一个需要注意的问题是IE6下的body会紧缩，所以从页面最边缘向内移动时后出现从HTML移入的情况，如需做边界处理请注意此点。在低级IE下会存在事件下漏的问题，参见第六条。

五、事件中的鼠标位置

用鼠标的位置在应用中做一些判断是一件效率较低且使用场景很局限的事，但是在特定的场景下却又无可奈何，既然我们改变不了浏览器与应用场景那就费点功夫搞明白怎么用现有的这点资源来做一些事情，正所谓人生的意义不在于拿一手好牌，而在于打好一手烂牌。

chrome一共提供了7组与位置有关的信息：clientX、layerX、offsetX、pageX、screenX、webkitMovementX、x；IE的事件提供的位置参数我就不说了，我们以chrome事件的位置参数为标准，用IE固有的属性来模仿。

screenX:鼠标在显示屏幕上的坐标；

clientX:鼠标在页面显示区域的坐标。

offsetX:鼠标相对于“触发事件的元素”的位置，从内容区域左上角开始定位，不是从border左上角开始！这个属性比较好用，用来判断鼠标点在一个元素中的哪个位置很方便。

注：以上几个都是各浏览器通用的。

pageX:标准浏览器特有，鼠标在页面上的位置，从页面左上角开始定位，这个可以很方便在整个页面上进行定位，IE没有直接替换的属性。

layerX:标准浏览器特有，鼠标相对于“触发事件的元素的层级关系中离该元素最近的，设置了position的父元素”的边界的位置，从border的左上角开始定位，即如果这个父元素存在border，则坐标原点在border的左上角，而不是内容区域的左上角。

x：IE特有，跟layerX一个效果，可作为layerX的直接替换属性，现代浏览器的现行版本一景支持了该属性。

webkitMovementX:鼠标的移动距离，主要用在一些3D场景中，比如第一视角的游戏，需要计算用户鼠标的移动距离来反馈画面。下面来自mozilla官网的API

This API is useful for applications that require significant mouse input to control movements, rotate objects, and change entries. It is particularly essential for highly visual applications, such as those that use first-person perspective, as well as 3D views and modeling.

For example, you can create apps that let your users control the viewing angle simply by moving the mouse around without any button clicking. The buttons are then freed up for other actions. This kind of mouse input is quite handy for viewing maps, satellite imagery, or first-person scenes (such as in a game or an immersive video).

当然老式浏览器就不大算指望他了，下面是一段兼容代码：

document.addEventListener("mousemove", function(e) {
var movementX = e.movementX ||
e.mozMovementX ||
e.webkitMovementX ||
0,
movementY = e.movementY ||
e.mozMovementY ||
e.webkitMovementY ||
0; // Print the mouse movement delta values
console.log("movementX=" + movementX, "movementY=" + movementY);
}, false);

注：IE和FF的定位有个1px的差别，实际上，IE的定位从0开始，FF的定位从1开始，FF永远会比IE大1px，需要根据实际情况处理。

六、IE的事件下漏解决方案

在低级IE下当两个元素重叠且不设置背景时，鼠标事件会从上面一层的元素漏到下面的元素上。解决此问题是设置背景，如果页面有半透明效果那就需要额外加一个元素设置背景再将其透明度用CSS设为全透明。

之前写的一篇：二级事件模型

别人的一篇优秀博文：浏览器中关于事件的那点事儿