常见的原生javascript事件处理与浏览器兼容问题（上）

最新推荐文章于 2022-01-02 14:19:17 发布

alisaLearn

最新推荐文章于 2022-01-02 14:19:17 发布

阅读量696

点赞数

分类专栏：原生JS 校招常见题文章标签：事件添加删除 javascript 阻止默认事件浏览器兼容性

本文链接：https://blog.csdn.net/alisalearn/article/details/52651773

版权

原生JS 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

校招常见题

7 篇文章 0 订阅

订阅专栏

在WEB前端开发中，处理各浏览器差异的问题是一个重要的部分。
不同浏览器的内核及解析方式不同，对对象名和方法名的定义不同，导致写出来的代码不能得到我们想要的效果。所以在开发的时候需要解决这些问题。浏览器差异体现在很多方面，本文主要对事件处理作出理解。

下面介绍处理浏览器差异的通解和举例说明一些事件处理机制的对象和方法处理。

 常用浏览器差异处理

1.对象检测：可通过条件分支语句及三元操作符检测，例如：

function(){
    if(typeOf(obj1)!='undefined'){
        obj1();
    }else {
        obj2();
    }
}

----------

typeOf(obj1) != 'undefined' ? obj1() : obj2();//三元操作符

2.判断一个属性是否存在最直接的方法是用JS对这个属性赋值。
（需要修改）

添加与删除事件：

添加事件在IE中 : attachEvent(“eventName”,func);
在FF中：addEventListener(“eventName”, func , bool );
其中bool里true代表事件捕获方式，false代表事件冒泡方式；

if(typeOf(document.addEventListenter != "undefined")){
    document.addEventListenter("mousedowm",cli,true);//FF下
}else {
    document.attachEvent("onmousedowm",cli);//IE下
}

删除事件在IE中 :dettachEvent(“eventName”,func);
在FF中：removeEventListener(“eventName”, func , bool );

if(typeOf(document.removeEventListenter != "undefined")){
    document.removeEventListenter("mousedowm",cli,true);//FF下
}else {
    document.dettachEvent("onmousedowm",cli);//IE下
}

阻止事件的默认行为：
比如阻止点击a标签后的跳转

FF : preventDefault();
IE : window.event.returnValue = false;

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8' />
    <script>
        /*阻止事件的默认行为*/

        function delDef(e){
           if(e.preventDefault){
               e.preventDefault();
           }else{
               window.event.returnValue = false;
           }
           return false;
        }
        window.onload =function(){
           var elem = document.getElementById("a1");
           elem.onclick = function(e){
               delDef(e);
           }
        }
    </script>
</head>
<body>
    <a id = "a1" href="http://www.google.com">www.google.com</a>
    <a href="http://www.google.com">www.google.com</a>
</body>

</html>

总结：以上介绍了常用解决浏览器兼容的办法，并给出了事件添加与删除、阻止时间的默认行为的实例。主要用条件判断与三元操作解决该问题。

alisaLearn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见的原生javascript事件处理与浏览器兼容问题（上）

在WEB前端开发中，处理各浏览器差异的问题是一个重要的部分，不同的浏览器的内核及处理方式不同**（详见）**，对对象名和方法名的定义不同，导致写出来的代码不能得到我们想要的效果。所以在开发的时候需要解决这些问题。下面介绍处理浏览器差异的通解和举例说明一些事件处理机制的对象和方法处理。
复制链接

扫一扫

专栏目录