感谢 ♥ 作者
先不感谢了

JS基础(事件的绑定)

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


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

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,
这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
removeEventListener()(事件名称,函数,捕获),解除绑定

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

addEventListener()中的this,是绑定事件的对象
attachEvent()中的this,是window
需要统一两个方法this

 

绑定事件兼容性代码:

 

        <style>
            #box1 {
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
        <script>
            /*
             * obj 对象
             * evebtstr    绑定事件
             * callback    执行函数
             */
            window.onload = function() {
                var box1 = document.getElementById('box1');
                function bind(obj, eventstr, callback) {
                    if (obj.addEventListener) {
                        //大部分浏览器兼容的方式
                        obj.addEventListener(eventstr, callback, false);
                    } else {
                        /*
                         *this是谁由调用方式决定
                         *callback.call(obj)
                         */
                        //IE8及以下
                        obj.attachEvent("on" + eventstr, function() {
                            //在匿名函数中调用回调函数
                            callback.call(obj);
                        });
                    }
                }
                bind(box1, "click", function() {
                    alert("aaaa");
                });
        </script>
    </head>
    <body>
        <div id="box1"></div>
    </body>

 

posted @ 2020-03-07 08:34  MDZZZZ  阅读(125)  评论(0编辑  收藏  举报