如何通过js实现添加事件监听和移除事件监听

Posted 2023-04-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何通过js实现添加事件监听和移除事件监听相关的知识，希望对你有一定的参考价值。

直接用js实现比较麻烦，不同版本的浏览器（主要是低版本的）支持的方法会不一样。

建议使用jquery实现：

添加事件例：

$("button").on("click", function()
console.log("clicked");
);

移除事件例：

$("button").off("click");

文档链接：http://api.jquery.com/on/

参考技术A <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    .detail_info
        position: absolute;
        display: none;

    </style>
</head>
<body>
    <input type ="button" value="测试增加/移除监听" id="btn_bind"/>
    <div style="position: relative;" id="box_content">
        <input type="text" class="text" />
        <input type="text" class="text" />

        
        <div class="detail_info" id="box_detail">
            浮动提示信息
        </div>
    </div>
    <script type="text/javascript">
    (function ()
        document.getElementById("btn_bind").addEventListener("click", function ()
            if(this.bindStatue)
                removeEvent();
             else
                bindEvent();


            this.bindStatue = !this.bindStatue;
        );

        function removeEvent()
            var inputs = document.querySelectorAll(".text");
            for(var i = 0, length = inputs.length; i < length; i++)
                inputs[i].removeEventListener("mousemove", showDetail);
                inputs[i].removeEventListener("mouseout", hideDetail);



        function bindEvent()
            var inputs = document.querySelectorAll(".text");
            for(var i = 0, length = inputs.length; i < length; i++)
                inputs[i].addEventListener("mousemove", showDetail);
                inputs[i].addEventListener("mouseout", hideDetail);



        function showDetail(e)
            var e = e || window.event,
                box = document.getElementById("box_detail"),
                content = document.getElementById("box_content");

            box.style.display = "block";
            box.style.top = e.clientY - content.offsetTop + "px";
            box.style.left = e.clientX - content.offsetLeft + "px";


        function hideDetail()
            document.getElementById("box_detail").style.display = "none";

    )();
    </script>
</body>
</html>

js添加事件和移除事件:addEventListener()与removeEventListener()

参考技术A addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。
它们都接受3个参数：如 addEventListener("事件名" , "事件处理函数" , "布尔值"); (注：事件名不含"on",如“click”) 现在的版本可以省略第三个参数，默认值为false

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除

这个例子中，使用addEventListener()添加一个事件处理程序。虽然调用removeEventListener(0是看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的那一个完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传addEventListener()中的相同

重写后的这个例子在addEventListener()和removeEventListener()中用的是相同的函数。

1：相同事件绑定和解除，需要使用共用函数；绑定和解除事件时事件没有"on" 即onclick写成click
2：共用函数不能带参数；

布尔值参数是true，表示在捕获阶段调用事件处理程序；就是最不具体的节点先接收事件，最具体的节点最后接收事件

以上是关于如何通过js实现添加事件监听和移除事件监听的主要内容，如果未能解决你的问题，请参考以下文章