Javascript中的事件委托和代理

Javascript中的事件委托和代理

当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制

```

```

使用事件代理机制，当事件被抛到更上层的父节点document的时候，我们通过检查事件的目标对象（target）来判断并获取事件源Li。

```

var docBody = $(document.body);

docBody.delegate('.tt,*[data-role="mneu"]','click',function (e) {//class 为"tt"或都data-role='menu'的所有li,这里可以添加多个条件

e.stopPropagation(); //stop propagation

console.log(e.target.id);

});

```

原理是：

为父节点添加一个click事件，当子节点被点击的时候，click事件会从子节点开始向上冒泡。父节点捕获到事件之后，通过判断e.target来判断是否为我们需要处理的节点。从而可以获取到相应的信息，并作处理。

事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件起泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来组织事件的冒泡传播。

详细查看：https://davidwalsh.name/event-delegate