jQuery.event兼容各浏览器的event详细解析

jQuery在遵循W3C规范的情况下，对事件的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断,
如果想了解如何封装，可以看jquery源码

event对象的各个属性

介绍jQuery的一个方法 jQuery.event.fix(event || window.event);
此方法个浏览器的event对象转换为 jQuery.event; 如果您的事件是通过jQuery方法绑定的，就不需要进行转换了！

1.event.type属性

该方法作用是可以获取到时间的类型
代码如下:

$("a").click(function(event){
    alert(event.type); //获取时间类型
    return false; //阻止链接跳转
})

以上代码运行后会返回：“click”。

2.event.preventDefault()方法

该方法的作用是阻止默认的事件行为。
JavaScript中符合W3C规范的preventDefault()方法在IE浏览器中无效。jQuery对其进行了封装，使之能兼容各种浏览器。

3.event.stopPropagation()方法

该方法是阻止事件的冒泡。JavaScript中符合W3C规范的stopPropagation()方法在IE浏览器中无效。jQuery对其进行封装，使之能兼容各种浏览器。

4.event.target属性

event.target属性的作用是获取到出发事件的元素。jQuery对其封装后，避免了W3C、IE和safari浏览器不同标准的差异。
代码如下:

$("a[href=http://www.jb51.net]").click(function(event){
    alert(event.target.href); //获取触发事件的<a>元素的href属性值
    alert(event.target.tagName); //获取触发事件的元素的标签名称
    return false; //阻止链接跳转})

5.event.relatedTarget属性

在标准DOM中，mouseover和mouseout所发生的元素可以通过event.target()方法来访问，相关元素是通过event.relatedTarget属性来访问的。
event.relatedTarget属性在mouseover中相当于的event.fromElement属性，在mouseout中相当于event.toElement,jQuery对其进行了封装，使之能兼容各种浏览器。

6.event.pageX/event.pageY属性

该方法的作用是获取到光标相对页面的x坐标和y坐标。如果没有使用jQuery时，那么IE浏览器中是用event/event.y方法，而在Firefox浏览器中用event.pageX/event.pageY方法。如果页上有滚动条，则还要加上滚动条的宽度和高度。在IE浏览器中还应该减去默认的2px的边框。
代码如下:

$(function() {
    $("a").click(function(event) {
        alert("Current mouse position:" + event.pageX + "," + event.pageY);
        //获取鼠标当前相对于页面的坐标
        return false; //阻止链接跳转
    });
})

7.event.which属性

该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按钮。
代码如下:

$(function() {
    $("body").mousedown(function(e) {
        alert(e.which); //1 = 鼠标左键；2 = 鼠标中键；3 = 鼠标右键。
    })
})

以上代码加载到页面中，用鼠标单击页面时，单击左、中、右键分别返回1、2、3.

8.event.metaKey属性

针对不同浏览器对键盘中的按键解释不同，jQuery也进行了封装，并规定event.metaKey()方法为键盘事件中获取按键。

9.event.originalEvent属性。

该方法的作用是指向原始的事件对象。

事件的传播

传播的三个阶段

当一个事件发生以后，它会在不同的DOM节点之间传播（propagation）。这种传播分成三个阶段：

1.第一阶段：从window对象传导到目标节点，称为“捕获阶段”（capture phase）。
2.第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
3.第三阶段：从目标节点传导回window对象，称为“冒泡阶段”（bubbling phase）。
这种三阶段的传播模型，会使得一个事件在多个节点上触发。比如，假设div节点之中嵌套一个p节点。

<div>
 <p>Click Me</p>
</div>

如果对这两个节点的click事件都设定监听函数，则click事件会被触发四次。

var phases = {
 1: 'capture',
 2: 'target',
 3: 'bubble'
};
var div = document.querySelector('div');
var p = document.querySelector('p');
div.addEventListener('click', callback, true);//true 代表在事件捕获阶段触发 false 代表事件在冒泡阶段触发 默认为false
p.addEventListener('click', callback, true);//jquery封装的事件默认冒泡阶段捕获
div.addEventListener('click', callback, false);
p.addEventListener('click', callback, false);
function callback(event) {
 var tag = event.currentTarget.tagName;
 var phase = phases[event.eventPhase];
 console.log("Tag: '" + tag + "'. EventPhase: '" + phase + "'");
}

事件代理

常用于为后追加的元素绑定事件
由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。

var ul = document.querySelector('ul');
ul.addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() === 'li') {
  // some code
}
});

上面代码的click事件的监听函数定义在ul节点，但是实际上，它处理的是子节点li的click事件。这样做的好处是，只要定义一个监听函数，就能处理多个子节点的事件，而且以后再添加子节点，监听函数依然有效。
如果希望事件到某个节点为止，不再传播，可以使用事件对象的stopPropagation方法。

p.addEventListener('click', function(event) {
  event.stopPropagation();
});

使用上面的代码以后，click事件在冒泡阶段到达p节点以后，就不再向上（父节点的方向）传播了。

但是，stopPropagation方法不会阻止p节点上的其他click事件的监听函数。如果想要不再触发那些监听函数，可以使用stopImmediatePropagation方法。

p.addEventListener('click', function(event) {
 event.stopImmediatePropagation();
});
p.addEventListener('click', function(event) {
 // 不会被触发
});