关于浏览器事件addEventListener()处理小记
2020-03-27 本文已影响0人
RexingLeung
前言
当浏览器与对象 , 元素发生互动时 , 浏览器会产生对应的事件 , 例如 : 浏览器加载完文档 , 用户把鼠标指针移动超链接上或者敲击键盘等 , 浏览器都会产生事件 , 而且JavaScript还可以对一些特定类型的事件进行函数绑定以做一些自定义的事件
EventTarget.addEventListener()
EventTarget.addEventListener() 方法将指定的监听器注册到 事件目标( EventTarget ) 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标( EventTarget )可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest)。
addEventListener()的工作原理是将实现 事件目标( EventTarget ) 的函数或对象添加到调用它的 事件目标( EventTarget ) 上的指定事件类型的事件侦听器列表中。
EventTarget.addEventListener()语法
- target.addEventListener(type, listener, useCapture);
表一
| 参数 | 说明 |
|---|---|
| type | 表示监听事件类型的字符串 |
| listener | 当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数 |
| useCapture | Boolean，在DOM树中，注册了listener的元素， 是否要先于它下面的EventTarget，调用该listener。 当useCapture(设为true) 时，沿着DOM树向上冒泡的事件，不会触发listener。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。 如果没有指定， useCapture 默认为 false 。 |
简单实现
<div id="outside">
<div id="t1">one</div>
<div id="t2">two</div>
</div>
<script>
function modifyText() {
var t2 = document.getElementById("t2");
if (t2.firstChild.nodeValue == "three") {
t2.firstChild.nodeValue = "two";
} else {
t2.firstChild.nodeValue = "three";
}
}
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);
</script>
EventTarget 的简单实现
var EventTarget = function() {
this.listeners = {};
};
EventTarget.prototype.listeners = null;EventTarget.prototype.addEventListener = function(type, callback) {
if(!(type in this.listeners)) {
this.listeners[type] = [];
}
this.listeners[type].push(callback);};
结语
本来以为addEventListener是一块小蛋糕 , 可以好好啃一下 , 发现越啃越难啃 , 然后只能浅浅的舔了一小口 , 加上工作繁忙 , 然后就啃不下去了
