JavaScript的事件机制包含,事件绑定、事件监听、事件委托(事件代理)等
js中的事件流
① .冒泡:当下级节点触发某个事件的时候,该事件会逐级向上触发上级节点的同类事件。
② .捕获:和冒泡类似,只不过事件的顺序相反。即是从上级节点传递到下级节点
事件绑定
- 在DOM元素中直接绑定;
- 在JavaScript代码中绑定;
- 绑定事件监听函数addEventListener()。
事件监听
- 关于事件监听,W3C规范中定义了3个事件阶段,依次是捕获阶段、目标阶段、冒泡阶段。
- 优点:1.可以绑定多个事件;2.可以解除相应的绑定
事件委托
定义:给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件。
好处:可以避免对每个子元素添加监听器,减少操作DOM节点的次数,从而减少浏览器的重绘和重排,提高代码的性能。使用事件委托,只有父元素与DOM存在交互,其他的操作都是在JS虚拟内存中完成的,这样就大大提高了性能。
使用场景:当子元素有很多,需要对子元素的事件进行监听的时候。
-
步骤:
- 第一步:给父元素绑定事件
给元素ul添加绑定事件,通过addEventListener为点击事件click添加绑定 - 第二步:监听子元素的冒泡事件
这里默认是冒泡,点击子元素li会向上冒泡 - 第三步:找到是哪个子元素的事件
通过匿名回调函数的参数e用来接收事件对象,通过target获取触发事件的目标
- 第一步:给父元素绑定事件