JS事件监听兼容性解决方案

兼容性处理与浏览器事件监听

最新推荐文章于 2020-04-02 22:37:37 发布

原创最新推荐文章于 2020-04-02 22:37:37 发布 · 387 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#事件监听兼容性

Javascript 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了一种处理浏览器兼容性的方法，通过封装函数来判断并使用不同浏览器的事件监听方式。首先针对大多数浏览器使用addEventListener，然后处理不支持此方法的IE等浏览器。

兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器
封装一个函数，函数中判断浏览器的类型：

 function addEventListener(element, eventName, fn) {
      // 判断当前浏览器是否支持 addEventListener 方法
      if (element.addEventListener) { 
      // 浏览器支持此种方式，可以根据方法名找到方法声明，方法声明会转换为true
        element.addEventListener(eventName, fn);  // 第三个参数 默认是false
      } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
      } else {
        // 相当于 element.onclick = fn;
        element['on' + eventName] = fn;
 }