事件基础四

最新推荐文章于 2022-09-15 23:32:57 发布

Mr Gong

最新推荐文章于 2022-09-15 23:32:57 发布

阅读量372

点赞数

分类专栏： DOM JS

本文链接：https://blog.csdn.net/GYZ_Code/article/details/76864542

版权

DOM 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

绑定事件的第二种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定的第二种形式</title>
    <style type="text/css">

    </style>
</head>

<script type="text/javascript">

    /*
        第一种形式  obj.onclick=fn;  

        这种形式一个对象同一个事件的只能绑定一个函数，后面绑定的事件函数会覆盖前面绑定的函数
    */

    /*
        第二种形式  obj.addEventListener(事件名称，事件函数，是否捕获)

        这种形式可以给一个对象的同一个事件绑定不同的函数


        标准：obj.addEventListener(事件名称，事件函数，是否捕获)

            1）事件名称      没有 "on" 前缀

            2）是否捕获      指定事件函数在事件流进来还是出去时执行

            默认值 false   事件冒泡，表示事件函数在事件流出去时执行

                   true     事件监听，表示事件函数在事件流进来时执行

            3）事件函数中的this指向的是document

        非标准IE：obj.attachEvent(事件名称,事件函数)

            1）事件名称      有 "on" 前缀

            2）没有事件捕获

            3）事件函数中的this指向的是window

        call()方法  函数下的一个方法  call方法的第一个参数可以改变函数执过程中内部this的指向                             
    */

    function fn1(){


        alert(this);
    }

    function fn2(){


        alert(2);
    }
// document.attachEvent('onclick',fn1);
// document.attachEvent('onclick',fn2);

// document.addEventListener('click',fn1,false);
// document.addEventListener('click',fn2,false);

// document.attachEvent('onclick', fn1.call(document));

//兼容性解决方案
function bind(obj, evname, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evname, fn, false);
    } else {
        obj.attachEvent('on' + evname,function() {

            fn.call(obj);
        });
    }
}

bind(document,'click',fn1);
bind(document,'click',fn2);

</script>
<body>

</body>
</html>