事件监听:
- 定义:事件监听是指当某一事物源对象(例如按钮、输入框等)的某种事件(如点击、输入等)发生时,向监听器传送该事件对象,监听器里面封装了事件信息,接到事件对象后进行相应的处理。
- 示例:以学校放课铃作为事物源对象,当放课铃声响起(即事件发生)时,学生(作为监听器)接收到放课铃声,并进行下课处理。
- 实现方式:在DOM中,事件监听可以通过多种方式实现,如DOM0级事件监听和DOM2级事件监听。DOM0级事件监听通常通过内联方式或
on+事件名
的方式添加,而DOM2级事件监听则通过addEventListener
和removeEventListener
方法添加和删除事件监听。
事件代理(或事件委托):
- 定义:事件代理是指当有大量子元素需要触发事件时,不直接为每个子元素绑定事件监听器,而是将事件监听器绑定在它们的父元素上,利用事件冒泡原理来处理子元素的事件。这样,数百个事件监听器可以变为一个监听器,从而提升了网页性能。
- 原理:事件代理是通过事件冒泡原理实现的。当事件在子元素上触发时,会冒泡到其父元素(甚至更上层的元素),如果父元素上绑定了事件监听器,那么该监听器就可以捕获到这个事件并进行处理。
- 示例:假设有一个包含多个列表项的列表,我们想要为每一个列表项添加点击事件。如果使用事件代理,我们只需要在列表的父元素上绑定一个事件监听器,然后判断触发事件的元素是否是列表项,如果是则进行相应的处理。
- 优点:通过事件代理,我们可以减少内存中的事件监听器数量,提高性能;同时,对于动态添加的子元素,我们不需要重新绑定事件监听器,因为它们的事件会冒泡到已经绑定了监听器的父元素上。