[JS]事件委托

事件委托

1.需求:

在三级联动菜单中,我们一共有一千多个内容,并且需要点击其中的一个内容,就需要去跳转路由。

2.解决分析:

在渲染时为组件绑定上@click事件、使用事件委托。

3.分析绑定@click

如果为每一个内容都绑定一个@click,那么就相当于添加了一千多个回调函数,对性能很不友好,但是可以实现功能。

4.分析事件委托:

如果我们为三级联动菜单的父元素添加一个点击事件,同样,也可以解决该问题,并且,采用该方式只需要添加一个@click,通过查找触发源去判断执行哪些操作。

在JavaScript中,拥有事件冒泡的机制,当点击一个子元素时,触发父元素的事件,然后在爷爷元素触发事件,直到触发到祖元素的事件。

在祖元素的点击事件回调函数中,拥有一个event属性,该属性是一个对象,里面有一个target属性,该属性存储的就是触发源头的DOM信息,这样就知道点击的哪个元素,从而触发了祖元素的事件。

然后我们在通过自定义属性或者标签名,去判断该执行哪些操作。

5.事件委托和事件冒泡:

事件委托是利用事件冒泡的机制,它们并不一样。

6.事件委托的缺点:

如果在向上冒泡时,突然被某一层给把事件冒泡阻止掉了[event.stopPropagation],那么就不会冒泡到祖元素了,接着事件委托对应的处理函数也就不会执行了。

对于不支持冒泡的事件,无法向上级传递。

发表评论 / Comment

用心评论~