关于浏览器事件addEventListener()处理小记

前言

当浏览器与对象 , 元素发生互动时 , 浏览器会产生对应的事件 , 例如 : 浏览器加载完文档 , 用户把鼠标指针移动超链接上或者敲击键盘等 , 浏览器都会产生事件 , 而且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是一块小蛋糕 , 可以好好啃一下 , 发现越啃越难啃 , 然后只能浅浅的舔了一小口 , 加上工作繁忙 , 然后就啃不下去了