js事件绑定的第二种形式

最新推荐文章于 2024-07-24 11:09:48 发布

芊芊简历

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量469

点赞数

分类专栏： javascript web前端文章标签： javascript 博客 ie

本文链接：https://blog.csdn.net/czhui1993/article/details/50493097

版权

javascript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

web前端

3 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定的第二种形式</title>
</head>
<script>
    window.onload = function(){
        /*
        * 什么叫做事件绑定的第二种形式？
        * 给一个对象的统一个事件绑定多个不同的函数，给一个对象绑定事件函数的第二种形式；
        * 为什么要用事件绑定的第二种形式呢？
        * obj.onclick = fn1;
        * obj.onclick = fn2;
        * 同一对象执行不同的事件后者会覆盖前者，但是在事件绑定的第二种形式下就不会出现这个问题
        * ie:obj.attachEvent(事件名称，事件函数);
        *   1.没有捕获
        *   2.事件名称有on
        *   3.事件函数执行的顺序：标准ie下>正序，非标准ie下>倒序
        *   4.this指向window
        *标准：obj.addEventListener(事件名称，事件函数，是否捕获);
        *   1.有捕获
        *   2.事件名称没有on
        *   3.事件执行顺序正序
        *   4.this触发该对事件的对象
        * */
        //ie下用法
        //document.attachEvent('onclick',fn1);
        //document.attachEvent('onclick',fn2);
        //标准下得用法
        //document.addEventListener('click',fn1);
        //document.addEventListener('click',fn2);
        //综合两种方式可以写一个事件绑定函数
        /*function bind(obj,evname,fn){
            if(obj.addEventListener){
                obj.addEventListener(evname,fn,false);
            }else{
                obj.attachEvent('on'+evname,function(){
                    fn.call(obj);//在ie下this指向是window,所以要修正this指向.fn.call();传得第一个参数是this指向的是谁,后面的是所传的参数
                });
            }

        }
        bind(document,'click',fn1);
        bind(document,'click',fn2);*/
        function fn1(){
            alert(1);
        }
        function fn2(){
            alert(2);
        }

        /*
        * obj.addEventListener(evname,fn,false);
        * false:表示冒泡; true:表示捕获
        *
        *
        * */


        //使用事件绑定的第一种形式冒泡执行顺序是div3，div2，div1
        var oDiv1 = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');
        var oDiv3 = document.getElementById('div3');
        /*oDiv1.onclick = fn;
        oDiv2.onclick = fn;
        oDiv3.onclick = fn;*/


        //下面使用事件绑定的第二种形式
        //false 冒泡 执行顺序div3，div2，div1
        /*oDiv1.addEventListener('click',fn,false);
        oDiv2.addEventListener('click',fn,false);
        oDiv3.addEventListener('click',fn,false);*/
        //true 冒泡 执行顺序div1，div2，div3,主要是捕获按钮接收的事件，捕获到一个执行一个
        /*oDiv1.addEventListener('click',fn,true);
        oDiv2.addEventListener('click',fn,true);
        oDiv3.addEventListener('click',fn,true);
         */


        function fn(){
            alert(this.id);
        }
        //如何移出事件绑定
        //标准下
        /*oDiv1.addEventListener('click',fn,false);
        oDiv2.removeEventListener('click',fn,false);//移出绑定事件
        oDiv3.addEventListener('click',fn,false);*/
        //ie下
        oDiv1.detachEvent('onclick',function(){
            fn.call(oDiv1);
        });//移出绑定事件
        oDiv2.attachEvent('onclick',function(){
            fn.call(oDiv2);
        });
        oDiv3.attachEvent('onclick',function(){
            fn.call(oDiv3);
        });

    }
</script>
<style>
    div { padding:40px; }
    #div1 { background:red; }
    #div2 { background:blue; }
    #div3 { background:green; }
</style>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>
</body>
</html>

芊芊简历

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件绑定的第二种形式

html>html lang="en">head> meta charset="UTF-8"> title>事件绑定的第二种形式title>head>script> window.onload = function(){ /* * 什么叫做事件绑定的第二种形式？ * 给一个对象的统一个事件绑定多个不同的函数，给一个对象
复制链接

扫一扫

专栏目录