JS----addEventListener()

最新推荐文章于 2025-02-03 00:16:17 发布

weixin_34240657

最新推荐文章于 2025-02-03 00:16:17 发布

阅读量82

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liaohongwei/p/9718146.html

本文详细介绍了如何使用addEventListener向元素添加事件，以及removeEventListener的使用限制，包括匿名函数的移除问题。通过示例代码展示了如何跨浏览器实现事件监听，适用于现代Web开发。

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

addEventListener() 用于向指定元素添加事件。

可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。
语法：
element.addEventListener(event,fn,useCaption );
参数说明：tr件，比如 click mouseenter mouseleave
fn 回调函数
useCaption 用于描述是冒泡还是捕获。默认值是false，即冒泡传递。
当值为true，就是捕获传递。
示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>addEventListener</title>
    <script type="text/javascript" src="js/jquery-3.0.0.js"></script>
    <style type="text/css">
        #content {
            width: 100px;
            height: 50px;
            background: red;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 50px
        }
    </style>
</head>

<body>
    <div id="content">点击</div>
    <script type="text/javascript">
        //addEventListener 用于向指定元素添加事件句柄
        //可以向一个元素添加多次点击事件，后一个点击事件不会覆盖前一个点击事件

        var content = document.getElementById("content");
        content.addEventListener("click", function () {
            alert("支持此方法1");
            console.log("11");
        }, false)
        content.addEventListener("click", function () {
            alert("支持此方法2");
            console.log("22");
            add();
        }, false)
        content.addEventListener("mouseenter", add, false);
        function add() {
            console.log("我和你");
        }
        content.removeEventListener("mouseenter", add, false);
        var content = document.getElementById("content");
        if (content.addEventListener) {
            content.addEventListener(event, add);
        } else if (content.attchEvent) {
            content.attchEvent(event, add);
        } 123456

        function add() {
            console.log("我们在一起");
        }
    </script>
</body>

</html>

注意：

removeEventListener() 不能移除匿名函数，像上面add()这种是可以的。
IE8及更早版本和Opear 7.0及更早版本不支持addEventListener()和removeEventListener(),对于这类浏览器我们可以使用detachEvent()来移除事件。

element.detachEvent(event,fn);

跨浏览器解决方案：

var content = document.getElementById("content");
if(content.addEventListener){
    content.addEventListener(event,add);
}else if(content.attchEvent){
    content.attchEvent(event,add);
}

function add(){
    console.log("我们在一起");
}

转载于:https://www.cnblogs.com/liaohongwei/p/9718146.html