Javascript中事件委托（delegate）是如何运行的

1.什么是事件委托（Event Delegation）

通俗的理解就是，当给节点注册事件时，为了优化代码可以不用为每个子节点(例如

节点)添加相同的事件，借助事件冒泡机制，可以将这些事件统统委托给他们的父节点(ul)进行捕获处理，这样就达到了简化代码，也消除了循环引用导致的内存泄漏的问题了。

示例代码：

  
Item 1
  
Item 2
  
Item 3
  
Item 4
  
Item 5
  
Item 6

// 为父节点ul注册一个事件
document.getElementById("list").addEventListener("click",function(e) {
  // e.target是被点击的元素   &&  检查被点击元素的节点类型
  if(e.target && e.target.nodeName.toLowerCase == "li") {
    // 设置被点击元素的背景
    e.target.style.backgroundColor = red;
  }
});

Event 对象

定义和用法

target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

target 事件属性

2.事件绑定

事件绑定进行的三个阶段

分别是指：事件捕获、事件目标、事件冒泡三个阶段(IE低版本不支持事件冒泡)

IE的事件绑定：

element.attach('onclick',function(){});

W3C事件绑定：

element.addEventListener('click',function(e){});

两者的联系：

  1.两者在一个dom节点上都能同时绑定多个事件，(传统的一个元素进行多个事件绑定，会覆盖之前的事件)

2.W3C中,this指向的是绑定当前元素对象

两者区别：

1.IE中，this表示的是window,event也绑定在window对象上，即window.event,W3C中，this是指当前对象

2.IE中仅仅会捕获事件的冒泡阶段，W3C中会处理事件的捕获阶段和冒泡阶段

3.IE中注册事件以" on + 事件名称 ",W3C中注册事件直接用事件名称。

阻止事件传播的两种方式：

event.stopPropagation()  

event.cancelBubble = true;

上述方法将停止事件的传播，阻止它被分派到其他 Document 节点。