事件绑定

作者: 冰点雨 | 来源:发表于2022-07-19 21:12 被阅读0次

JS 事件监听、事件委托2018-07-10
JS-事件绑定
事件绑定、事件冒泡与捕获
025 JS事件
IE的attachEvent
JavaScript事件
js事件
绑定事件自定义事件事件冒泡
jQuery事件
2018-10-18

addEventListener()

这个方法也可以给元素绑定响应函数
——参数：
1.事件的字符串，不要on
2.回调函数
3.是否在捕获阶段触发事件，一般传false

        使用addEventListener()可同时绑定多个事件
        当事件触发时，响应函数会按照先后顺序执行

        不支持I8及以下浏览器
        this是绑定事件对象

 btn1.addEventListener("click",function(){
              alert(1);
            },false);
            btn1.addEventListener("click",function(){
              alert(2);
            },false);

attchEvent()

attchEvent() 这个方法也可以给元素绑定响应函数
——参数：
1.事件的字符串
2.回调函数

        使用attchEvent()可同时绑定多个事件
        当事件触发时，响应函数执行顺序和addEventListener()相反

        IE8及以下
        this是window

btn1.attchEvent("onClick",function(){
                alert(1);
            });
            btn1.attchEvent("onClick",function(){
                alert(2);
            });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
    <script>
        window.onload = function(){
            var btn1 = document.getElementById("btn1");
            /* 
           addEventListener() 这个方法也可以给元素绑定响应函数
           ——参数：
                1.事件的字符串，不要on
                2.回调函数
                3.是否在捕获阶段触发事件，一般传false

            使用addEventListener()可同时绑定多个事件
            当事件触发时，响应函数会按照先后顺序执行

            不支持I8及以下浏览器
            this是绑定事件对象

             */
            // btn1.addEventListener("click",function(){
            //   alert(1);
            // },false);
            // btn1.addEventListener("click",function(){
            //   alert(2);
            // },false);


            /* 
             attchEvent() 这个方法也可以给元素绑定响应函数
           ——参数：
                1.事件的字符串
                2.回调函数

            使用attchEvent()可同时绑定多个事件
            当事件触发时，响应函数执行顺序和addEventListener()相反

            IE8及以下
            this是window
             */
            // btn1.attchEvent("onClick",function(){
            //     alert(1);
            // });
            // btn1.attchEvent("onClick",function(){
            //     alert(2);
            // });

            bind(btn1,"click",function(){
                alert(1);
            });
        };


        function bind(obj,eventStr,callback){
            if(obj.addEventListener){
                obj.addEventListener(eventStr,callback,false);
            }else{
                // obj.attchEvent("on"+eventStr,callback);

                // 解决this不统一的问题  
                obj.attchEvent("on"+eventStr,function(){
                    // 在匿名函数中调用函数
                    callback.call(obj);
                });
            }

        }
    </script>

</head>
<body>
    <button id="btn1">点我一下</button>
</body>
</html>