原生JS跨浏览器事件封装处理

最新推荐文章于 2023-01-09 15:34:37 发布

qq_29069777

最新推荐文章于 2023-01-09 15:34:37 发布

阅读量123

点赞数

分类专栏：前端文章标签： addeventlistener js事件

原文链接：https://www.mk2048.com/blog/blog.php?id=hbi2acjjhcib&title=%E5%8E%9F%E7%94%9FJS%E8%B7%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BA%8B%E4%BB%B6%E5%B0%81%E8%A3%85%E5%A4%84%E7%90%86

版权

前端专栏收录该内容

1175 篇文章 2 订阅

订阅专栏

引子：用javascript给元素绑定事件，我们可以用addEventListener这个方法，然而这个方法有兼容问题，比如在IE浏览器上面就无效，在IE上面要用attachEvent这个方法

一、addEventListener和attachEvent的区别：

1、addEventListener有3个参数，attachEvent只有2个参数，默认是冒泡

2、addEventListener的第一个参数是事件类型（例如：click）,attachEvent的第一个参数是事件处理函数名称（例如：onclick）

3、this的指向不同，addEventListener中的this,指的是触发的元素，attachEvent中的this指的window

4、为一个事件添加多个事件处理程序，执行的顺序不同，addEventListener会按照添加的处理程序顺序执行，attachEvent的执行顺序是随机的

二、兼容性封装处理：

举例的HTML结构如下：
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>test001</title>
    <style type="text/css">
        .red{color:red;}
    </style>
</head>
<body class="l-bg2">
 <button id="cnt" class="btn">1111</button> 
 <button class="btn">2222</button>
 <button class="btn">3333</button> 

 <div class="page-coat">
     
 </div> 

</body>

js代码封装如下:
var eles = document.querySelectorAll('.btn') //类数组
//var eles = document.getElementById('cnt') //单个
function addEvent(ele,type,callback){
    if(!ele){
        return false
    };
    if(!ele.length){
        if(ele.addEventListener){
            ele.addEventListener(type,callback,false)
            return true;
        }else if(ele.attachEvent){
            ele['e' type callback] = callback;
            ele[type callback] = function(){
                ele['e' type callback](window.event)    
            };
            ele.attachEvent('on' type,ele[type callback])
            return true
        }
        return false
    }else{
        for(var i=0;i<ele.length;i  ){
            eventBody(i)
        }
    }
    //处理类数组元素同时绑定事件方法
    function eventBody(i){
        if(ele[i].addEventListener){
            ele[i].addEventListener(type,callback,false);
        }else if(ele[i].attachEvent){

            ele[i]['e' type callback] = callback;

            ele[i][type callback] = function(){
                ele[i]['e' type callback](window.event)
            }

            ele[i].attachEvent('on' type,ele[i][type callback])
        }
    }
    
}

function func1(){
    alert(this.innerText)
}
//使用方法
addEvent(eles,'click',func1)

这样就解决了解决了上面提到的addEventListener和attachEvent的区别问题。

注意：1、this指向的知识，以上巧妙运用了this指向调用这个函数的对象（比如ele），来保证在IE浏览器中，this指向调用次事件的元素

2、闭包的知识，把for循环的每个 i 值，通过闭包保存，如果是ES6，可以用let,就更方便了

以上目的为了讨论学习，有不完善的地方希望大家原谅，并提出更好的方法，谢谢

欢迎加入大前端交流群！群号：277942610，VIP新群

更多专业前端知识，请上【猿2048】www.mk2048.com

qq_29069777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS跨浏览器事件封装处理

引子：用javascript给元素绑定事件，我们可以用addEventListener这个方法，然而这个方法有兼容问题，比如在IE浏览器上面就无效，在IE上面要用attachEvent这个方法一、a...
复制链接

扫一扫