EventTarget.addEventListener()事件监听

最新推荐文章于 2024-07-30 10:56:44 发布

荧惑

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量653

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_49602426/article/details/126801799

版权

文章目录

EventTarget.addEventListener()的意义和原理

什么是事件监听

事件监听：也叫注册事件、绑定事件。
事件： 用户与网页的交互动作；比如说鼠标滑动、点击网页。
监听： 是为了让计算机随时能够发现这个时间发生了，从而执行程序员下达的指令动作，也就是我们封装起来函数里面需要执行的。

JS的事件监听的主要形式有两种：

以on开头的传统注册方式，比如说onclick、onmousemove等。
addEventListener()+不带on的事件类型的注册方式

addEventListener()的原理

原理： 将函数或实现 EventListener 的对象添加到调用它的 Event 目标上指定事件类型的事件侦听器列表中。如果函数或对象已位于此目标的事件侦听器列表中，则不会再次添加该函数或对象。

addEventListener()的语法

EventTarget.addEventListener(type, event, listener, useCapture)

addEventListener()的参数

参数	说明	是否必填
EventTarget	被绑定的监听对象，一般为执行事件的对象的父级或者本身（this）	必填
type	一个不带on的区分大小写的字符串，表示要监听的事件，eg: click、mousemove等	必填
listener	事件处理函数，事件发生是会调用该监听函数，注意这里的函数为一个回调函数	可选
useCapture	DOM事件流的其中一个阶段（JS每次只允许执行一个阶段），为一个布尔值，默认值为false（冒泡阶段，从下往上执行），true（捕获阶段，从上往下执行）	可选

注意：onficus(聚焦)、onblur(失焦)、onmouseenter(鼠标移入)、onmouseleave(鼠标移出)四个是没有事件冒泡的

addEventListener()的特点

同一个元素同一个事件可以注册多个监听器（监听处理函数）

addEventListener()的移除

addEventListener()为绑定事件，那么既然有绑定那就有移除，那addEventListener()的移除是什么呢
—removeEventListener()事件移除
比如说，在我第一次点击一个元素想让它执行但是第二次再点就不执行了应该怎么实现呢？

在这里，被移除了事件监听的只能点击一次之后就不能再触发点击了，但是左边没有被移除的就能一直被点击，实现代码如下：

<body>
    <button>可以无限点击</button>
    <button>只有第一次点击生效哦</button>
    <script>
        var btn = document.querySelectorAll('button')
        btn[0].addEventListener('click', function() {
            console.log(111);
        })
        
        btn[1].addEventListener('click', fn)
        function fn() {
            console.log(222);
            btn[1].removeEventListener('click', fn)
            // 因为移除监听事件和绑定的参数是一样的，所以这里也只能是一个回调函数，函数不打()是因为点击才执行
        }
    </script>
</body>

如果觉得那个比较麻烦的话还有一种实现方法：

代码如下：

btn[1].addEventListener('click', function fn() {
            console.log(222);
            console.log(this);
            this.removeEventListener('click', fn)
        })
        // 注意这里的函数调用都是不打()的哟

好到这里差不多知道了事件的绑定，既然监听事件和传统on开头的注册方法效果差不多，那么事件监听一般怎么使用，用在哪里呢

addEventListener()监听事件的使用—事件委托

两个都是绑定事件，那 addEventListener() 那么长为什么还要去用他呢

当我们遇到那种一个大盒子里面有很多个小盒子更或者说ul里面有很多li还要去操作每一个li的时候，用传统注册方式一个个的去绑定那多麻烦，但是 addEventListener() 就可以讲事件委托给父元素，再通过 e.target 的方式来操作每一个子元素。

事件委托核心原理：给父节点添加监听器，利用之间冒泡影响每一个子节点，通过子节点冒泡到父节点身上来完成事件，再通过 e.target 得到触发事件的对象然后就可以操作触发事件的子节点，这样可以大量的减少代码量。

那么 e.target 又是什么呢？
请听下回分解。

荧惑

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EventTarget.addEventListener()事件监听

事件监听：也叫注册事件、绑定事件。用户与网页的交互动作；比如说鼠标滑动、点击网页。是为了让计算机随时能够发现这个时间发生了，从而执行程序员下达的指令动作，也就是我们封装起来函数里面需要执行的。以on开头的传统注册方式，比如说onclick、onmousemove等。addEventListener()+不带on的事件类型的注册方式。
复制链接

扫一扫