解决跨浏览器的事件问题

最新推荐文章于 2023-09-26 08:38:46 发布

csdncsdn9876

最新推荐文章于 2023-09-26 08:38:46 发布

阅读量311

点赞数

分类专栏： javascript 文章标签： javascript 跨浏览器

本文链接：https://blog.csdn.net/csdncsdn9876/article/details/51586812

版权

javascript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>跨浏览器解决方法</title>
</head>

<body>
   <input type="button" value="btn" id="btn"/>
    <script>
       function showMessage(){
           alert("hello world");
       }
       var btn = document.getElementById("btn");
       var eventUtil = {
           //添加句柄
           addHandler:function(element,type,handler){//element:被操作的元素；type:是什么事件；handler:进行什么操作
               if(element.addEventListener){
                   element.addEventListener(type,handler,false);//DOM 2级
               }else if(element.attachEvent){
                   element.attachEvent("on"+type,handler);//IE事件
               }else{
                   element["on"+type]=handler;//0级
               }
           },
           //删除句柄
           removeHandler:function(element,type,handler){//element:被操作的元素；type:是什么事件；handler:进行什么操作
               if(element.removeEventListener){
                   element.removeEventListener(type,handler,false);//DOM 2级
               }else if(element.detachEvent){
                   element.detachEvent("on"+type,handler);//IE事件
               }else{
                   element["on"+type]=null;//0级
               }
           }
       }
       eventUtil.addHandler(btn,'click',showMessage);//在IE 和其他浏览器中均可以显示
    </script>
</body>

</html>

上面中的eventUtil是我们封装的一个处理事件跨浏览器的兼容的问题的脚本。大家不妨在本地编辑试试效果。