注册事件的兼容性处理

最新推荐文章于 2022-05-10 00:12:00 发布

向阳，像样。

最新推荐文章于 2022-05-10 00:12:00 发布

阅读量161

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/tangyuan97/article/details/104071679

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

注册事件的方式

ele.on事件类型 = function(){}
addEventListener(事件类型,事件处理函数,useCapture) 第三个参数默认是false，冒泡阶段执行
attachEvent(事件类型，事件处理函数)

1.第一种方式只能有一个事件处理函数，而第二、三种可以定义多个事件处理函数
2.addEventListener IE9以下版本以及OPERA7以下版本不支持
3.attachEvent 只有IE6-10版本里支持，IE11及其他浏览器不支持

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="按钮" id="btn">
  <script>
    var btn = document.getElementById('btn');

    addEventListener(btn, 'click', function () {
      alert('hello world');
    });

    addEventListener(btn, 'click', function () {
      alert('hello itheima');
    });


    // 处理注册事件的兼容性问题
    // eventName, 不带on，  click  mouseover  mouseout
    function addEventListener(element, eventName, fn) {
      // 判断当前浏览器是否支持addEventListener 方法
      if (element.addEventListener) {
        element.addEventListener(eventName, fn);  // 第三个参数 默认是false
      } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
      } else {
        // 相当于 element.onclick = fn;
        element['on' + eventName] = fn;
      }
    }
  </script>
</body>
</html>