JavaScript中的事件处理程序（addEventListener）
170 浏览量
2021-01-08
14:11:21
上传
评论
收藏 173KB PDF 举报
JavaScript中的事件处理程序（中的事件处理程序（addEventListener））
EventTarget是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。
DOM的事件操作，监听和触发，都定义在EventTarget接口，所有的节点对象都部署了这个接口，其他一些需要事件通信的浏
览器内置对象，XMLHttpRequest,AudioNode,AudioContext也部署了这个接口
事件处理程序（事件处理程序（addEventListener））
addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。
事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest)。
addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听
器列表中。
格式为：格式为：
target.addEventListener(type, listener, useCapture);
type:
事件触发类型，如click,keypress等等
listener:
事件处理函数，当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。 listener 必须是一个
实现了 EventListener 接口的对象，或者是一个函数。
useCapture:
Boolean，在DOM树中，注册了listener的元素， 是否要先于它下面的EventTarget，调用该listener。 当useCapture(设为true)
时，沿着DOM树向上冒泡的事件，不会触发listener。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个
处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。
useCapture 默认为 false 。
优点：优点：
1.它允许给一个事件注册多个监听器。 特别是在使用AJAX库，JavaScript模块，或其他需要第三方库/插件的代码。
2.它提供了一种更精细的手段控制 listener 的触发阶段。（即可以选择捕获或者冒泡）。
3.它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。
示例示例1：：
var flag = false;
btn.addEventListener('click',function(){
senction.style.backgroundColor = flag?'#ddd':'#bbb'
},false);
效果图如下图所示：
示例二：示例二：
one
two
// 改变t2值的函数
function modifyText(new_text) {
评论0