js 事件委托

事件委托

在一个元素（比如document）上绑定一个事件处理函数来处理该元素所有子孙元素的事件，当然，这里一般会在处理函数里判断event.target，根据触发事件的目标对象不同进行不同的操作。这一过程就叫事件委托。

事件委托的原理

事件委托将事件监听绑定在目标元素的父级上，当目标元素响应事件时冒泡到绑定事件的父级上，进行判断该事件的目标元素是否是传入的元素，如果是就执行传入的函数。

如果有多个DOM需要监听的情况下，给每一个DOM都绑定监听函数，对性能会有极大的影响。

 

ios中click事件失效

ios的safari中当使用事件委托给一个元素添加click事件时，如果事件是委托到 document 或 body 上，并且委托的元素是默认不可点击的（如 div, span 等），此时 click 事件会失效。

原因很清楚了，safari中不可点击元素的click事件不会冒泡到document和body上。

解决办法

1.将click事件直接绑定到元素上（不使用事件委托）

2.需要绑定click事件的元素改成<a>或者<button>等可点击元素

3.将click事件委托到非doucument或body的父级元素上

4.给目标元素添加一条css样式 cursor:pointer（推荐这种，方便省事）