JavaScript中 --- 绑定多事件问题浏览器兼容性解决方法。

╰+哭是因爲堅強的太久メ 2023-05-21 08:59 22阅读 0赞

为一个元素绑定多事件有两种方法：addEventListener（）和 attachEvent()

addEventListener（） —IE8及以下不支持

*  通过这个方法也可以为元素绑定响应函数
 *  参数：  
      1.事件的字符串，不要on  
      2.回调函数，当事件触发时该函数会被调用  
      3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
 *  使用addEventListener () 可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。

attachEvent()

*  在IE8中可以使用attachEvent()来绑定事件
 *  参数：  
      1.事件的字符串，要on。  
      2.回调函数。
 *  这个方法也可以同时为一个事件绑定多个处理函数。  
    不同的是它是后绑定的先执行，执行顺序和addEventListener()相反。br

但是这样就出现了浏览器不兼容的问题，我们可以自己定义一个方法来解决该问题。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            window.onload = function() { 
                var btn = document.getElementById("btn");
                // btn.onclick = function() { 
                // alert("1");
                // };
                // btn.onclick = function() { 
                // alert("2");
                // };
    
                // btn.addEventListener("click", function() { 
                // alert("1");
                // }, false);
                // btn.addEventListener("click", function() { 
                // alert("2");
                // }, false);
    
    
                // btn.attachEvent("onclick", function() { 
                // alert("1");
                // });
                // btn.attachEvent("onclick", function() { 
                // alert("2");
                // });
    
                // btn.addEventListener("click", function () { 
                // alert(this);
                // }, false);
                // btn.attachEvent("onclick", function() { 
                // alert(this);
                // });
    
                // 测试this是指向的谁
                // bing(btn, "click", function() { 
                // alert(this);
                // });
    
                bing(btn, "click", function() { 
                    alert("1");
                });
                bing(btn, "click", function() { 
                    alert("2");
                });
    
            };
    
            // 我们可以自己定义一个函数，来兼容这个问题：
            // addEventListener()中的this，是绑定事件的对象。
            // attachEvent() 中的this，是window。
    
            // 参数：
            // obj 绑定的事件对象
            // eventStr 事件的字符串(不要on)
            // callback 回调函数
    
            function bing(obj, eventStr, callback) { 
                if (obj.addEventListener) { 
                    obj.addEventListener(eventStr, callback, false)
                } else { 
                	// 创建一个匿名函数来调用callback，去指定this指向的元素
                    obj.attachEvent("on" + eventStr, function() { 
                        callback.call(obj);
                    });
                }
    
            };
        </script>
    </head>
    
    <body>
        <button id="btn">点击</button>
    
    </body>
    
    </html>

[个人博客地址，没事来逛逛https://aqingya.cn][https_aqingya.cn]

愿你的坚持终有收获。

[https_aqingya.cn]: https://aqingya.cn