关于浏览器事件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 接口的对象,或者是一个函数
useCaptureBoolean,在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是一块小蛋糕 , 可以好好啃一下 , 发现越啃越难啃 , 然后只能浅浅的舔了一小口 , 加上工作繁忙 , 然后就啃不下去了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值