JavaScript之事件委托和事件代理

JavaScript之事件委托和事件代理

事件委托概念：

事件委托还有一个名字叫事件代理，JS高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。
简单的说就是原本需要一个一个去处理的事件，现在只需要一个总的事件去管理他们即可 （自己理解的，可能有偏差）

用事件委托的意义

在JavaScript中，添加到页面上的事件处理次数将关系到页面的整体运行性能，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，因此减少DOM操作是性能优化的主要思想之一。
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率越大。如果要用事件委托，就会将所有的操作放到js程序里面，只对它的父级(如果只有一个父级)这一个对象进行操作，与dom的操作就只需要交互一次，这样就大幅度的减少与dom的交互次数，提高性能。

事件委托的原理

事件委托是利用事件的冒泡原理来实现的，就是事件从最深的节点开始，然后逐步向上传播事件。
例如：页面上有这么一个节点树，给最里面的节点加一个onclick事件，那么这个事件就会一层一层的往外执行。如果给最外面的div加点击事件，那么里面的节点做点击事件的时候，都会冒泡到最外层的节点上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

事件冒泡及捕获

事件处理过程分三个阶段：

• 事件捕获阶段：当某个元素触发某个事件，顶层的document就会发出一个事件流，随着DOM节点向目标元素节点流去，直到找到目标节点。注意：该过程事件相应的监听函数不会被触发的。
• 事件目标阶段：找到目标节点之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
• 事件起泡阶段：从目标节点开始，往顶层节点传播。途