理解 事件捕获、事件目标、事件冒泡、事件委托事件代理

事件捕获

从视图层进行事件操作后,进入HTML代码层,然后从元素的最顶层开始,从父到子到孙...一直寻找下去,直到找到触发该事件的元素。这个寻找的过程,称为“事件捕获”。
事件目标

当事件捕获过程到达了触发该事件的元素时,该元素被称为“事件目标”。
事件冒泡

找到事件目标后,该事件将从事件目标元素处,一层一层往上逐层传出,直到视图层显示出来,这个过程就叫做“事件冒泡”。
事件委托(事件代理)

在JS中,每一个函数都是一个对象,对象就要占用内存,所以为了性能优化(减少DOM和函数交互,性能优化主要思想之一),将所有事件处理放到JS中去,大大减少了操作DOM交互,从而提高了性能。
方法就是把子元素的共同事件写在父元素上,这样当点击父元素时就能触发这个本来是子元素的事件,点击各个子元素时也能触发这个事件(因为事件冒泡,点击子元素会逐层向上触发每层事件),这就是把本来
是多个子元素要绑定的共同事件,委托给了他们的父元素,这就是“事件委托”。 事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div
>ul>li>a;比如给最里面的a加一个click点击事件,
那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,
这就是事件委托,委托它们父级代为执行事件。 事件委托的优点
1.管理的函数变少了。不需要为每个元素都添加监听函数。对于同一个父节点下面类似的子元素,可以通过委托给父元素的监听函数来处理事件。 2.可以方便地动态添加和修改元素,不用因为元素的改动而修改事件绑定。 3.JavaScript和DOM节点之间的关联变少了,这样也就减少了因循环引用而带来的内存泄漏发生的概率。

 

posted @ 2020-08-24 22:46  PANIC404  阅读(103)  评论(0编辑  收藏  举报