javascript中事件绑定的兼容性写法

最新推荐文章于 2023-05-19 20:06:28 发布

DaYuanLi

最新推荐文章于 2023-05-19 20:06:28 发布

阅读量766

点赞数

分类专栏： JavaScript 文章标签：事件绑定的兼容写法

本文链接：https://blog.csdn.net/qq_34800304/article/details/80908581

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            border:10px dashed lightgreen;
        }
    </style>
    <script>
        //注册事件的方式
        //1.  ele.on事件类型 = function(){}
        //2.  addEventListener(事件类型,事件处理函数,useCapture)  第三个参数默认是false，冒泡阶段执行
        //3.  attachEvent(事件类型，事件处理函数)


        //1.在注册事件的时候，判断浏览器的注册事件的方式，然后直接使用该方式进行注册事件
            //复用性太差
        //2.将注册事件的代码封装到一个函数中
            //每次调用该函数，都会进行浏览器能力检测
        //3.在函数中返回函数，让外部函数只执行一次，判断也就只会执行一次
        //使用函数内创建的函数返回给外界，就可以重复使用该函数，进行事件的注册


        //封装成函数，问题是每次都会判断
       function registeEvent(target, type, handler){
           if(target.addEventListener){
               target.addEventListener(type,handler)
           }else if(target.attachEvent){
               target.attachEvent("on"+type,handler)
           }else{
               target["on"+type] = handler;
           }
       }

        //使用更好的方式，避免了多次的判断
        //这里存在问题就是

        //我们使用统一的方式，进行事件注册

        //1、注册的事件的处理函数中的，this指向不一致
        //使用addEventListener的方式注册的点击事件的回调函数中的this 指向target
        //但是使用attachEvent的方式注册点击事件的回调函数中的this 指向window

        //2、3种注册事件的方式中，回调函数内获取事件对象的方式也是不一致的
        //要让他们统一，
        //在第二种的事件注册方式（attachEvent）中，手动给handler传递window.event

        function createEventRegister(){
            if(window.addEventListener){
                return function(target, type, handler){
//                    this ---> window
                    target.addEventListener(type,handler)
                }
            }else if(window.attachEvent){
                return function(target, type, handler) {
                    target.attachEvent("on" + type, function(){
                        handler.call(target, window.event);
                    })
                }
            }else{
                return function(target, type, handler) {
                    target["on" + type] = handler;
                }
            }
        }

        var registeEvent = createEventRegister();


        window.onload =function () {
            var div = document.getElementById("div1");
            registeEvent(div,"click",function(e){
                console.log(e);
                console.log(this);
                //this---->该事件的触发对象
                alert("太阳天空照，花儿对我笑，小鸟说：完了")
            })
        }


//        div.addEventListener("click",function(e){
//            this
//            e.screenX;
//        })
//
//        div.attachEvent("onclick".function(){
            this--->window
//            window.event.screenX
//        })

    </script>
</head>
<body>
<div id="div1">我是一个div，哈哈哈哈<br>
    点我有惊喜哦~~~
</div>
</body>
</html>

DaYuanLi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript中事件绑定的兼容性写法

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; div{ wid
复制链接

扫一扫