JS获取事件冒泡路径(path、composedPath )的兼容性写法

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

前言： 记录一下项目中遇到的坑!!! 在处理事件时，需要获取到触发事件元素冒泡过程的所有元素，因此使用 event.path 属性。但是 safari 和 firefox 中 event.path 属性不存在，因此进行总结，给大家避坑

根据 MDN的composedPath 描述，除 IE11外，所有主要浏览器的最新版本都支持该属性,关于该描述如下：

事件对象 event

1. 什么是event

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等等。说的通俗一点就是，event是JS的一个系统内置对象。平时无法使用，当DOM元素发生按键、鼠标等等各种事件时，系统会自动根据DOM元素触发的事件生成一个event对象。然后你可以直接取、使用这个新创建的对象去查询一些信息或者完成一些功能

2.event兼容性：

在Chrome下event是undefined；在ie低版本下是null；兼容写法：const event = window.event || event;

3. event在不同浏览器的兼容问题，及如何去解决

event 的浏览器兼容问题。 (1) IE　event 是一个全局的变量，不存在作用域的问题。也就是说，谁触发了事件，那在事件绑定的函数中，你可以直接使用event的属性做任何操作，没有作用域的限制，也没有其他函数格式的要求。所以在IE中放心大胆的去用吧！

(2)Chrome 谷歌　event并不是全局变量。他是在每个事件绑定的函数中都默认传入了一个形参event，注意函数的第一个形参就是event对象，而且我们不需要去写这个形参。如果你要在事件绑定的函数中使用 event，那直接 event . 点他的属性即可。系统默认将event对象以参数的形式传递到了函数中。这里不需要你做任何操作，只管用，简单粗暴。

4.写法：

document.onclick=function（e）{var e = e || window.event}

JS获取事件冒泡路径(path、composedPath )的兼容性写法

方案一：

    getEventPath(e){
       return e.path || (e.composedPath && e.composedPath()) || ''
    }

方案二：函数实现composedPath方法

/*
 * 获取事件冒泡路径，兼容 chrome,firefox,safari
 * @param event
 * @returns {*}
 */
  function getEventPath(event) {
      if (event.path) {
        return event.path;
      }
      let target = event.target;

      event.path = [];
      // target.parentNode 获取父元素的 dom 节点
      while (target.parentNode !== null) {
        event.path.push(target);
        target = target.parentNode; 
      }
      event.path.push(document, window);
      return event.path;
  }