思维导图--JS的事件流以及事件流兼容性问题

最新推荐文章于 2023-04-24 10:51:19 发布

鸭绒

最新推荐文章于 2023-04-24 10:51:19 发布

阅读量153

点赞数 1

分类专栏： javaScript 思维导图文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_43334673/article/details/110941431

版权

javaScript 同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

思维导图

1 篇文章 0 订阅

订阅专栏

思维导图内容：

如何使用JS事件，以及IE和标准DOM事件模型之间存在的差别。
在这里插入图片描述

主要是IE浏览器与其它主流浏览器的兼容性问题：

在这里插入图片描述

根据事件兼容性进行封装：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>侦听器</title>
  </head>
  <body>
    <script>
      var EventBus = {
        addEventListener: function (element, type, handle, capture) {
          if (element.addEventListener) {
            element.addEventListener(type, handle, capture)
          } else if (element.attachEvent) {
            element.attachEvent('on' + type, handle)
          } else {
            element['on' + type] = handle
          }
        },

        removeListener: function (element, type, handle) {
          //移除事件为什么要传递handle呢？DOM2中绑定事件是可以绑定多个handle的，并不是所有handle都被移除，传进哪个就移除哪个
          if (element.removeListener) {
            element.removeListener(type, handle)
          } else if (element.detachEvent) {
            element.detachEvent('on' + type, handle)
          } else {
            element['on' + type] = null
          }
        },

        getTarget: function (e) {
          return e.target || e.srcElement
        },

        getEvent: function (e) {
          return e || window.event
        },

        stopPropagation: function (e) {
          if (e.stopPropagation) {
            e.stopPropagation()
          } else {
            e.cancelBubble = true
          }
        },

        preventDefault: function (e) {
          if (e.preventDefault) {
            e.preventDefault()
          } else {
            e.returnValue = false
          }
        },
      }
    </script>
  </body>
</html>