Open into-piece opened 5 years ago
事件委托
利用事件冒泡，只制定一个事件处理程序，就可以管理同一类型的所有事件。如父元素绑定事件所有子元素就可以触发，或把dom元素上绑定的事件统一绑定到document上。 DOM2.0模型将事件处理流程分为三个阶段：一、事件捕获阶段，二、事件目标阶段，三、事件起泡阶段。 事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。 事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。 事件起泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被触发。
解决的问题
性能问题：javascript中添加到页面的事件处理程序的数量将影响到页面的整体运行性能，因为不断与dom节点进行交互，访问dom次数越多，会因此浏览器事件重绘与重排的次数也越多，会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是dom操作的原因。 一个函数就是一个对象，是对象就要占用内存，一百个li就要占用一百个内存空间，而为父元素绑定一个事件就只占用一个事件的内存，且大大减少与dom的交互次数，提高性能。
利用事件冒泡，只制定一个事件处理程序，就可以管理同一类型的所有事件。如父元素绑定事件所有子元素就可以触发，或把dom元素上绑定的事件统一绑定到document上。
DOM2.0模型将事件处理流程分为三个阶段：一、事件捕获阶段，二、事件目标阶段，三、事件起泡阶段。
事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。 事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。 事件起泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被触发。
性能问题：javascript中添加到页面的事件处理程序的数量将影响到页面的整体运行性能，因为不断与dom节点进行交互，访问dom次数越多，会因此浏览器事件重绘与重排的次数也越多，会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是dom操作的原因。 一个函数就是一个对象，是对象就要占用内存，一百个li就要占用一百个内存空间，而为父元素绑定一个事件就只占用一个事件的内存，且大大减少与dom的交互次数，提高性能。