JavaScript：通过事件委托实现事件可配置

事件委托

在JavaScript里，通常要做的一件事是绑定事件，比如用户在页面的点击、滚动等，然后执行注册的回调函数，这样就响应了用户的某种行为。简单的例子如下：

在用户每次点击页面上的按钮时，弹出一个对话框显示‘hello’。 在有些情况下，我们期望页面上的一些元素响应用户同样的动作，举个例子。在用户点击列表的每一项时，将其内容显示在div#data-show里。

可以这么做：

其实是给列表的每一项（100个）分别绑定了点击事件。这样做的弊端在于，增加了内存，因为$(’#data-list li’)里有100个li对象。同时降低了代码性能，因为$(’#data-list li’)会搜索ul#data-list下所有的li元素。

在满足需求的情况下，怎么做更好呢？

答案是使用事件委托！

将li元素的点击事件委托给其父元素ul。这么做之所以行得通，是因为事件具有冒泡的特点，当内层元素的某个事件被触发，事件会一级一级冒泡到更外层元素。当外层元素被绑定事件且被触发时，判断事件的来源即event.target是否是目标元素li，如果是就执行回调。上面的代码等价于：

除了提高性能和节省内存的好处外，事件委托的另一个好处在于，页面动态变化后，不需要重新检索元素和绑定事件。上例中，如果通过AJAX向列表增加新项，新添加项仍能响应用户点击。

利用事件委托实现事件在HTML页面中的可配置

可能存在这样的需求，页面上的多个元素（不同的），会响应同样的用户行为，比如一个按钮和一个链接，均须响应同样的行为。这种case还有可能存在页面之间。举个例子。

Page 1:

Page 2:

JS代码势必会这样：

如果又有其他元素也要响应同样的行为，需要修改以上JS代码，而使其变得更长。是否有更好的方式？看下面这个例子。

JS code:

这个例子中，将所有含有样式类delegated-action的元素上的点击事件委托给了document。对象events存储用户通过events.on定义的所有动作和回调。在页面中，只要给元素加上属性class=”delegated-action”和data-action-name=”see-more”，该元素就能响应用户的点击动作了。若需要给回调传入数据，可以将数据以JSON的形式绑定在data-action-data属性上，而不需要修改JS代码。

HTML code:

这种方式很适合页面上通用组件或行为，而不用关心元素的类型、ID、命名等，只需要在HTML里添加指定的样式类，定义data-action-name和data-action-data属性即可。文章只拿click事件来描述例子，读者有兴趣可以扩展到代码以适合其他事件。