attachEvent 与 addEventListener 的监听

最新推荐文章于 2019-05-28 17:30:33 发布

weixin_30732487

最新推荐文章于 2019-05-28 17:30:33 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dragon-L/p/3604721.html

本文深入分析了attachEvent与addEventListener在不同浏览器（如IE、Firefox、Safari、Chrome）中的区别与应用，同时介绍了如何通过键盘监听简化代码兼容性问题。文章最后提供了jQuery的绑定事件方法作为辅助，并分享了兼容多种浏览器的方法。

说到 attachEvent 与 addEventListener 的事件必然会提到浏览器的判断，因为attachEvent只适用于于IE

先来看看常用的浏览器的判断

//判断浏览器类型  
if(navigator.userAgent.indexOf("MSIE")>0) { 
return "MSIE"; 
} 
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
return "Firefox";  //火狐
} 
if(isSafari=navigator.userAgent.indexOf("Safari")>0) { 
return "Safari";   //苹果
}

if(isChrome=navigator.userAgent.indexOf("Chrome")>0) { 
return "Chrome";   //谷歌
}

接下来就有了监听事件

    if (navigator.userAgent.indexOf("MSIE") > 0) {
              document.getElementById('txtABC').attachEvent("onpropertychange", txtChange);
          }
else if (navigator.userAgent.indexOf("Firefox") > 0) {
       document.getElementById('txtABC').addEventListener("input", txtChange, false);

}

一起来看看addEventListener 的参数

　　1：事件名称：click, blur 等事件名称，注意事件名不要带"on"。在IE 下才会使用 onclick,也就是使用attachEvent 事件监听的时候才用加On。

2：绑定的函数 txtChange 不要加括号。

3：布尔值，表示事件的响应顺序。当为false时为冒泡获取(由里向外)，true时方式(由外向里)。

当然

document.getElementById('txtABC').attachEvent("onpropertychange", txtChange);

方式也可以使用jquery 来绑定事件效果是一样的。

$("#txtArticleName").bind('propertychange', function() {
txChange();
});

这时候就会有一个问题出现，使用多个浏览器就要写多个判断。

那么我们就换一种思路。使用键盘监听：

            //////// 给txtArticleName绑定键盘事件
            $("#txtArticleName").bind("keydown", function() {
                    txtChange();
                }

});

大部分浏览器都支持，keydown事件，所以这么写可以兼容大部分浏览器.这样代码，看起来更简洁。

转载于:https://www.cnblogs.com/dragon-L/p/3604721.html