10.JS-事件监听的注册与移除

最新推荐文章于 2025-04-24 20:39:53 发布

WahFung_

最新推荐文章于 2025-04-24 20:39:53 发布

阅读量1.7k

点赞数

分类专栏： js笔记文章标签： js addEventListener removeEventListener

本文链接：https://blog.youkuaiyun.com/qq_43161149/article/details/82888164

版权

js笔记专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了JavaScript中事件监听的注册与移除，包括`addEventListener()`和`attachEvent()`方法的使用，以及如何通过事件监听方式注册事件。`addEventListener()`支持捕获和冒泡阶段，允许绑定多个事件而不会覆盖，但不被IE支持；`attachEvent()`仅支持冒泡阶段，是IE的特有实现。此外，还讲解了如何在非IE和IE环境下移除事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

addEventListener() 方法：

语法：element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" ). //这里的事件句柄是不带on的

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。默认为false。

优点：

该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)。

在事件处理函数内部，this关键字引用当前元素。

事件对象总是可以通过处理函数的第一个参数(e)捕获。

可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件

缺点：

IE不支持，必须使用IE的attachEvent函数替代。

attachEvent() 方法：

语法：element.attachEvent(event, function);

第一个参数是事件的类型 (如 "onclick"). //这里的事件句柄是带on的

第二个参数是事件触发后调用的函数。

注意：此方法只有冒泡阶段。

通过事件监听方式注册事件

非IE：元素对象.addEventListener(不带on的事件句柄，事件处理函数，事件流顺序默认flase)

IE：元素对象.attachEvent(带on的事件句柄，事件处理函数)

obj:事件源

type：事件类型(不带on)

fn：事件处理函数

   //这是一个封装好的事件监听注册方法 兼容非IE和IE

        function addEvent(obj,type,fn){
            
            if(obj.addEventListener){

                obj.addEventListener(type,fn,false);

            }else{

                obj.attachEvent("on"+type,fn);
            }

        }

移除事件监听

非IE：元素对象.removeEventListener(不带on的事件句柄，事件处理函数，事件流顺序默认flase)

IE：元素对象.detachEvent(带on的事件句柄，事件处理函数)

    //这是一个封装好的事件监听移除方法 兼容非IE和IE

       function removeEvent(obj,type,fn){
            
            if(obj.removeEventListener(){

                obj.removeEventListener(type,fn,false);

            }else{

                obj.detachEvent("on"+type,fn);
            }
        }