JS事件委托

程序设计之道无远弗届，御晨风而返。———— 杰佛瑞 · 詹姆士

什么是事件委托呢？他又有什么好处？说白了事件委托就是利用冒泡的原理，把本应该添加到某个元素上的事件委托给他的父级，从而减少DOM交互达到网页优化。

	var oUl = document.getElementById("newsList");    //获取ul
	oUl.onclick = function(e){
				//只有点击li时才会触发相应代码执行
				var evt = e || event;
				var _target = evt.target || evt.srcElement;	
				if(_target.nodeName.toUpperCase() == "LI"){		
					console.log(_target.innerHTML);			
				}
			}
			/*nodeName 属性可依据节点的类型返回其名称。
			如果节点是一个元素节点 , nodeName 属性将返回标签名。
			如果节点是一个属性节点， nodeName 属性将返回属性名。
			其他节点类型, nodeName 属性将返根据不同的节点类型返回不同的节点名称。
			 toUpperCase() 转为小写
			*/

这样写就可以不用一次次遍历li只要对ul执行一次DOM就可以达到想要的效果。那什么是冒泡呢，为什么可以这样做？
冒泡事件就是document到触发事件的那个节点一层层向下捕获直至事件源然后一层层向上冒泡。这就是事件冒泡，利用这个冒泡机制减少DOM操作，有一点要注意就是onclick不支持捕获事件，另有其他写法如下：

oBox.addEventListener("click",function(){
				console.log("click");
			},false);

这种写法又叫做为DOM2级事件处理。

• 添加事件监听器：addEventListener(事件名，处理函数，布尔值)
• 移除事件监听器：removeEventListener(事件名，处理函数)

注意：事件名不带on。
第一个值是事件名，第二个是处理函数，第三个布尔值，默认为false事件句柄在冒泡阶段执行，改为true的时候事件句柄在捕获阶段执行。这两个事件相同，但是在IE中不支持这两个属性，

• IE下的事件监听器：attachEvent(事件名，处理函数)，detachEvent(事件名，处理函数)
  注意：事件名带on。

---

有事件冒泡就有组织冒泡，阻止冒泡即不让事件一层层向上触发。以下方法可以阻止事件冒泡。

1. return false ；（在jQuery中使用return false时，相当于同时使用event.preventDefault和event.stopPropagation，它会阻止冒泡也会阻止默认行为。 但是使用原生js写时，return false只会阻止默认行为。）
2. stopPropagation(); （preventDefault 阻止浏览器默认行为）
3. window.event.cancelBubble = true;

//兼容火狐 获取event方法
function getEvent(){
    if(window.event){return window.event;}
    func = getEvent.caller;
    while(func != null){
        var arg0 = func.arguments[0];
        if(arg0){
            if((arg0.constructor == Event || arg0.constructor == MouseEvent
                || arg0.constructor == KeyboardEvent)
                || (typeof(arg0) == "object" && arg0.preventDefault
                && arg0.stopPropagation)){
                return arg0;
            }
        }
        func = func.caller;
    }
    return null;
}
 
//阻止冒泡到下一个事件
function stopPropagations(){
    var ev = getEvent();
    if (window.event) {
        ev.cancelBubble = true;
    }else if(ev.preventDefault){
        ev.stopPropagation();//阻止冒泡
    }
}

ps:如果不用事件委托，在页面添加节点的时候无法获取DOM事件，用事件委托就可以解决了。

---