*说到事件委托，我们首先先要知道什么是事件委托——
· 那么什么是事件委托呢？？？
JS里的事件委托就是当事件触发时，把要做的事委托给父元素（上级、上上级......）来处理。当需要添加的事件过多时，可以使用事件委托，而事件委托实际上利用了事件冒泡的特性。
· 那可能会问了，什么是事件冒泡呢？？
简单的来说，当我们点击子元素，触发的时事件会传递给父元素，这就是事件冒泡。
· 为什么要用事件委托呢？好处是啥？
咱先说说好处是啥：
因为在JavaScript中，每个函数都是对象，对象越多，占用的内存也就越多，合理使用事件委托可以减少内存的占用。所以事件委托的好处就是在内存中开辟了一块空间，节省资源同时减少了dom操作，提高性能，而且js新生成的子元素也不用新为其添加事件了，程序逻辑上比较方便
那为啥要用时间委托呢？
因为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。
此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。
· 好处说了，说说问题吧~
兼容，一个好的项目，首先要考虑的就是兼容问题，事件委托存在兼容性问题是，在老的IE下，事件源是 window.event.srcElement，其他浏览器是 event.target，所以在做兼容的时候 参数 = event.target || window.event 需要加上这一步。完美解决~
关于 Jquery事件委托在IOS系统会失效!?
将事件委托给了document元素，具体绑定情况如下：
$(document).on('click', ".btn", function(){})
PC端测试和安卓测试都正常，但是在IOS端缺失效了!根据H5新定义，默认可点击的元素有a标签和button标签，也就是给这两种标签进行事件委托是完全没有问题的。
解决办法:
给.btn加一个样式: cursor: pointer;
按照规定, 点击元素使用button或者a标签
把document换成.btn的父元素,前提是父元素不是跟随.btn一起动态添加进来的
然后给一个比较简单的问题，父级那么多子元素，怎么区分事件本应该是哪个子元素的？
区分方法就是event对象里记录的有“事件源”，它就是发生事件的子元素。
赠品：
事件捕获和事件冒泡机制
事件捕获
当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件
事件冒泡
当事件到达目标节点后，会沿着捕获阶段的路线原路返回。同样，所有经过的节点,都会触发对应的事件
DOM事件流模型
总共三阶段
在DOM兼容浏览器中，事件流分为3个阶段：
（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；
（2）目标阶段：真正的目标节点正在处理事件的阶段；
（3）冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段。 [3]
独特性质
DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。
另外，需要说明的是，有些事件是可以取消的，在整个事件流的任何位置通过调用事件的stopPropagation方法可以停止事件的传播过程。
网友评论