JavaScript事件监听机制

た入场券 2022-08-18 11:57 352阅读 0赞

初学JavaScript时，会用这样的方法监听事件

<html>
    <head>
        <meta charset="utf-8">
        <title>js事件监听机制</title>
    </head>
    <body>
        <input type="button" value="click me!" id="btn-1">
        <script type="text/javascript">
            btn1 = document.getElementById("btn-1");
            btn1.onclick = function(){
                alert("第一次点击按钮");
            }
            btn1.onclick = function(){
                alert("第二次点击按钮");
            }
        </script>
    </body>
</html>

然而和想象中的结果并不相同，当点击按钮时，弹出窗口这样显示

Center

这是因为当同一个对象用.onclick触发多个写法时，后面的方法会把前面的覆盖掉，当事件发生时，只会执行最后的绑定方法，在上面的例子中，后面的方法把前面的覆盖了，所以只出现了一个窗口。

对于这种现象，我们可以用以下的方式来解决

1.addEventListener

语法

target.addEventListener(type, listener, useCapture);

target：文档节点

type：事件名称，不含on，例如click，keydown

listener：调用的函数

useCapture：是否绑定在捕获阶段，默认为falsel

示例代码

<html>
    <head>
        <meta charset="utf-8">
        <title>js事件监听机制</title>
    </head>
    <body>
        <input type="button" value="click me!" id="btn-1">
        <script type="text/javascript">
            function eventFirst(){
                    alert("第一次点击按钮");
                }
                function eventSecond(){
                    alert("第二次点击按钮");
                }
            window.onload = function(){
                btn1 = document.getElementById("btn-1");
                btn1.addEventListener("click", eventFirst);
                btn1.addEventListener("click", eventSecond);
            }
        </script>
    </body>
</html>

当点击按钮时，出现如下情况

Center 1

点击确定

Center 2

依次输出第一个监听事件和第二个监听事件

解除事件绑定

<span style="font-size:18px;">btn1.removeEventListener("click", eventFirst);</span>

这样就解除了第一个监听事件的绑定

当点击按钮时，只输出第二个监听事件

注意：解除事件绑定时一定要用函数的句柄，否则解绑无效

2.attachEvent

IE浏览器使用attachEvent来绑定事件

语法

target.attachEvent(type, listener);

target：文档节点

type:事件名称，带on，比如onclick,onkeydown等等

listener：调用的函数

3.兼容各大主流浏览器的写法

通过以上的实验，最终对函数进行封装

代码如下

<html>
    <head>
        <meta charset="utf-8">
        <title>js事件监听机制</title>
        <style type="text/css">
        #box{
            height:100px;
            width:100px;
            background-color:red;
        }
        </style>
    </head>
    <body>
        <div id="box">
            <input type="button" value="click me!" id="btn-1">
        </div>
        <script type="text/javascript">
            //监听元素事件函数
            function addEventHandler(target, type, func){
                if(target.addEventListener){
                    //兼容IE9，Firefox以及Chrome
                    target.addEventListener(type, func, false);
                }else if(target.attachEvent){
                    //版本较低的IE浏览器
                    target.attachEvent("on" + type, func);
                }else{
                    target["on" + type] = func;
                }
            }
            //解除事件监听
            function removeEventHandler(target, type, func){
                if(target.removeEventListener){
                    target.removeEventListener(type, func, false);
                }else if(target.detachEvent){
                    target.detachEvent("on" + type, func);
                }else{
                    delete target["on" + type];
                }
            }
            function eventFirst(){
                alert("点击按钮");
            }
            function eventSecond(){
                alert("点击div");
            }
            window.onload = function(){
                btn1 = document.getElementById("btn-1");
                box1 = document.getElementById("box");
                //给按钮添加监听事件
                addEventHandler(btn1, "click", eventFirst);
                //给div添加监听事件
                addEventHandler(box, "click", eventSecond);
                //解除div的监听事件
                removeEventHandler(box, "click", eventSecond);
            }
        </script>
    </body>
</html>