JS事件冒泡、事件绑定、事件监听、事件委托

事件机制
事件绑定
首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

事件绑定的办法：
1.直接在HTML元素绑定，在标签后加onclick = function(){}等
2.在js脚本中绑定，获取元素后绑定事件
3.DOM绑定，添加事件监听

第一种无法删除，不好维护

第二种无法删除，维护性一般

第三种可以删除，维护性一般

在DOM中直接绑定

可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。

js代码绑定事件

可以使js代码和HTML标签分离，使文档结构清晰，便于开发管理

用事件监听绑定事件

用 addEventListener() 或 attachEvent() 来绑定事件监听函数。addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数，但是IE8.0及其以下版本不支持该方法，使用addEventListener()绑定函数时，必须要处理浏览器兼容问题

事件监听
W3C定义了三个事件阶段：捕获阶段、目标阶段、冒泡阶段

W3C规范：
1
语法：element.addEventListener(event,function,useCapture)

event : （必需）事件名，支持所有 DOM事件 。

function：（必需）指定要事件触发时执行的函数。

useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。

IE标准
1
语法：element。attachEvent(event,function)

event：（必需）事件类型。需加“on“，例如：onclick。

function：（必需）指定要事件触发时执行的函数。

事件监听的优点

1.可以绑定多个事件
1
常规的事件绑定只能执行最后的绑定事件

事件监听可以绑定多个事件

2.可以解除相应的绑定
1

封装事件监听

//绑定监听事件
function addEventHandler(target,type,fn){
if(target.addEventListener){
target.addEventListener(type,fn);
}else{
target.attachEvent("on"+type,fn);
}
}

//移除监听事件
function removeEventHandler(target,type,fn){
if(target.removeEventListener){
target.removeEventListener(type,fn);
}else{
target.detachEvent("on"+type,fn);
}
}

//测试
var btn5 = document.getElementById("btn5");
addEventHandler(btn5,"click",hello1);//添加事件hello1
addEventHandler(btn5,"click",hello2);//添加事件hello2
removeEventHandler(btn5,"click",hello1);//移除事件hello1

事件委托（事件代理）
事件委托利用事件的冒泡原理来实现的，事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

事件委托就 是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document），触发执行效果。实际代码中会用到jQuery的live（），delegate()、bind()、on()等。

var btn6 = document.getElementById("btn6");
document.onclick = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
if(target == btn6){
alert(btn5.value);
}
}

事件委托优点

1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用。
2、动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。

件冒泡和事件捕获是对同一件事情的不同看法。

如果浏览器采用的是事件冒泡，那么触发顺序是C–>B–>A，由内而外，像气泡一样，从水底浮向水面；如果采用的是事件捕获，那么触发顺序是A–>B–>C，从上到下，像石头一样，从水面落入水底。