JavaScript事件绑定

最新推荐文章于 2023-10-29 10:11:12 发布

禾子不枯萎

最新推荐文章于 2023-10-29 10:11:12 发布

阅读量147

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/haojieji/article/details/126493703

版权

同时为一个事件绑定多个处理函数

<script>
        window.onload=function(){
            var btn01=document.getElementById("btn01");
        //     {
        //         //使用对象.事件=函数形式绑定响应函数只能同时绑定一个，多个会覆盖前面
        //     btn01.onclick=function(){
        //         alert("1");
            
        //     }
        //     btn01.onclick=function(){
        //         alert("1");
            
        //     }
        // }

    //     {//addEventListener()，同时绑定多个响应函数，触发时按照绑定顺序响应，参数：1，事件的字符串不要”on“；2，回调函数，事件触发时被调用
    //     //3，是否在捕获阶段触发事件，需要一个布尔值，通常为false。不支持IE8及以下
        
    //     btn01.addEventListener("click",function(){
    //         alert(1)
    //     },false);
  
    // btn01.addEventListener("click",function(){
    //         alert(2);
    //     },false);
    //     }


        // {//attachEvent IE8使用
        // //参数：1，事件字符串要”on“；2，回调函数
        // //相同是同时为一个事件绑定多个处理函数，但不同是它先执行后绑定，执行顺序和addEventListener相反
        // btn01.attachEvent("onclick",function(){
        //     alert(1);
        // })
        // btn01.attachEvent("onclick",function(){
        //     alert(2);
        // })
        bind(btn01,"click",function(){
            alert(1);
        })
    //}


        //定义一个函数，用来指定元素绑定响应函数
        //addEventListener()中的this是绑定事件中的对象；addachEvent()中的this是window，要统一
        //参数：1，obj要绑定事件的对象；2，eventStr事件字符串(不要on）；3.callBack回调函数
        function bind(obj,eventStr,callBack){
            //大部分浏览器兼容
            if(obj.addEventLinstener){
                obj.addEventLinstener(eventStr,callBack,false)
            }else{
                // this是由调用方式决定；callback.call（obj）
                obj.attachEvent("on"+eventStr,function(){
                    //在匿名函数调用回调函数
                    callBack.call(obj);
                });
            }

        }


    };

    </script>
</head>
<body>
    <button id="btn01">点我</button>
</body>
</html>