js基础_72、事件的绑定

事件的绑定

使用 对象.事件=响应函数 这种形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边的会覆盖掉前边的。

addEventListener()

通过这个方法也可以为元素绑定响应函数。
参数：
1，事件的字符串(名称)，不要on。
2，回调函数，当事件触发时该函数会被调用。
3，是否在捕获阶段触发事件，需要一个布尔值，一般都传false。

比如：

var btn1=document.getElementById("btn1");
btn1.addEventListener("click",function(){},false);

addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。
这个方法不支持IE8及以下的浏览器。

attachEvent()

在IE8中可以使用attachEvent()来绑定事件。
参数：
1，事件的字符串(名称)，要on。
2，回调函数。

这个方法也可以同时为一个事件绑定多个响应函数，不同的是他是后绑定先执行，顺序和addEventListener()相反

addEventListener()中的this，是绑定事件的对象。
attachEvent()中的this，是window。

比如：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        </style>
        <script>
            window.onload=function(){
                var btn1=document.getElementById("btn1");
                btn1.addEventListener("click",function(){
                    alert(1);
                },false);
                btn1.addEventListener("click",function(){
                    alert(2);
                },false);
                btn1.addEventListener("click",function(){
                    alert(3);
                },false);
                /*在IE8中
                 * btn1.attachEvent("onclick",function(){
                    alert(1);
                });
                btn1.attachEvent("onclick",function(){
                    alert(1);
                });
                btn1.attachEvent("onclick",function(){
                    alert(1);
                });
                */
            };
        </script>
    </head>
    <body id="body">
        <button id="btn1">添加超链接</button>
    </body>
</html>

自定义一个函数，实现前面两个方法的功能并且兼容所有浏览器

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        </style>
        <script>
            var bind=function(obj,evenstr,callback){
                    if(obj.addEventListener){
                        //大部分浏览器兼容的方法
                        obj.addEventListener(evenstr,callback,false);
                    }else{
                        //IE8兼容的方法
                        obj.attachEvent("on"+evenstr,function(){
                            //改变attachEvent中的this指向，这里我们自定了了一个函数让attachEvent去执行了，
                            //而attachEvent没有去执行它本来该执行的函数。
                            callback.call(obj);
                        });
                    };
                };
            window.onload=function(){
                var btn1=document.getElementById("btn1");
                bind(btn1,"click",function(){
                    alert(this);
                })
            };
        </script>
    </head>
    <body id="body">
        <button id="btn1">添加超链接</button>
    </body>
</html>
posted @ 2022-03-12 17:16  青仙  阅读(104)  评论(0)    收藏  举报