什么是事件委托:
事件委托——给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件。(不理解冒泡的可以去百度下)
定义: 利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托。使用事件委托技术可以避免对特定的每个节点添加事件监听器,相反,事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。
事件委托的好处:
事件委托技术可以避免对每个字元素添加事件监听器,减少操作DOM节点的次数,从而减少浏览器的重绘和重排,提高代码的性能。
使用事件委托,只有父元素与DOM存在交互,其他的操作都是在JS虚拟内存中完成的,这样就大大提高了性能。
什么时候用事件委托:
当子元素有很多,需要对子元素的时间进行监听的时候
案例:
(1)原生JS实现事件委托效果
事件委托三部曲:
第一步:给父元素绑定事件给元素ul添加绑定事件,通过addEventListener为点击事件click添加绑定第二步:监听子元素的冒泡事件
这里默认是冒泡,点击子元素li会向上冒泡第三步:找到是哪个子元素的事件
通过匿名回调函数的参数e用来接收事件对象,通过target获取触发事件的目标
(2)JQ实现事件委托