JS -- 事件处理

JS中绑定事件的方法大致分为三种：

1. 在DOM元素中直接绑定
2. 在JS脚本中绑定
3. 绑定事件监听函数

选择DOM2中的addEventListener()方法的原因：

1.可以为相同的事件将多个处理程序绑定到一个元素上

若在DOM元素上直接绑定多个处理程序，则只会执行第一个；
若在JS脚本中绑定多个处理程序，则最后一个会覆盖前面的，只执行一个；
而addEventListener()可以绑定多个，都会执行，顺序随机。

2.可以在捕获阶段处理事件

绑定到事件处理程序特性（如onclick,onsubmit）的事件处理程序只能在冒泡阶段调用

3.可以将处理程序绑定到文本节点

语法：

Object.addEventListener(event,handle,capturePhase);

capturePhase: 指示应当在捕获阶段 ( true ) 还是冒泡阶段 ( false ) 调用处理程序的布尔值
捕获阶段：父元素先触发，向下传播到原事件
冒泡阶段：目标元素先触发，向上传播到父元素

事件模型

特征	IE4~8模型	DOM2模型
绑定处理程序	attachEvent()	addEventListener()
解绑处理程序	detachEvents()	removeEventListen()
Event对象	window.event	作为变元传递给处理程序
阻止默认动作	返回false	返回false，preventDefault()
事件传播方式	从目标向上传递到Document	从Document传递到目标，再向上传递到Document
停止传播	N/A	stopPropagation()
重定向事件	fireEvent()	dispatchEvent()

所以，IE并不支持事件捕获

语法：

Object.attachEvent(event,handle);

阻止默认动作

第一种方式：Event对象提供了preventDefault()方法，在任何时候都能取消事件的默认动作

event.preventDefault();

第二种方式：前两种传统的绑定事件的方法，还可以通过事件处理函数返回false，来取消默认行为

<a href="http://www.baidu.com/" onclick="return false" >百度</a>

阻止冒泡

设置Event对象的cancelBubble属性为true，在当前处理程序结束，阻止事件进一步冒泡

event.cancelBubble=true;

阻止继续派发事件

终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

event.stopPropagation();

关于重定向

重定向到另一个对象之前取消原事件，否则，fireEvent()创建后，新事件会添加到事件队列中，只有在原事件结束冒泡后，才会触发新事件

事件委托

原理:

事件委托依赖于事件冒泡，通过将事件绑定到容器元素，在事件被触发的时候，都会冒泡到达容器元素，由他代为执行
如div下有两个button，在div上绑定onclick事件，当点击任意button，都会触发div上的事件发生

用处：

使用了事件委托，就不需要重复地把同一个事件绑定到不同的DOM节点上，大大的提高了性能

<div id="parent">
    <button id="btn1">1</button>
    <button id="btn2">2</button>
</div>
<script>
	window.onload = function(){
		var parent = document.getElementById("parent");
		parent.addEventListener("click",function(){
			alert("Hello World!");
		},false)
	}
</script>

//jQuery绑定事件
$('#myUnorderedList').delegate('li', 'click', function(e) {
    var $myListItem = $(this);
    // ...
});
//jQuery解除绑定
$('#myUnorderedList').undelegate('li', 'click');

兼容性问题

1. 获得event事件对象
   event || (event = window.event);
2. 获得target目标元素
   event.target || event.srcElement;