详解JS事件 - 事件模型/事件流/事件代理/事件对象/自定义事件

事件模型

• DOM0 级事件模型 -没有事件流，这种方式兼容所有浏览器

  // 方式一  将事件直接通过属性绑定在元素上
  <button onclick="clickBtn()"></button>
  / 方式二 获取到页面元素后，通过 onclick 等事件，将触发的方法指定为元素的事件
  var btn = document.getElementById('btn')
  btn.onclick = function () {...}
  btn.onclick = null

• IE 事件模型 - 只有冒牌，仅在 IE 浏览器中有效，不兼容其他浏览器

  1. 事件处理阶段：事件在达到目标元素时，触发监听事件
  2. 事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行

  // 绑定事件
  el.attachEvent(eventType, handler)
  // 移除事件
  el.detachEvent(eventType, handler)

• DOM2 级事件模型 - W3C标准模型，除 IE6-8 以外的所有现代浏览器都支持该事件模型

  1. 事件捕获阶段：事件从 document 向下传播到目标元素，依次检查所有节点是否绑定了监听事件，如果有则执行 - 从外向内，把这个坐标转换为具体的元素上事件的过程，就是捕获过程(点击事件来自触摸屏或者鼠标，鼠标点击并没有位置信息，但是一般操作系统会根据位移的累积计算出来，跟触摸屏一样，提供坐标给浏览器）
  2. 事件处理阶段：事件在达到目标元素时，触发监听事件
  3. 事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行 - 从内向外，是人类处理事件的逻辑

  // 绑定事件
  target.addEventListener(type, listener[, useCapture]);
  // 移除事件
  target.addEventListener(type, listener[, useCapture]);

事件流：

• 浏览器事件流向捕获阶段、目标阶段、冒泡阶段，就是我们所说的- W3C事件模型

• 兼容的事件绑定写法

  function bindEvent(obj, type, fn) {
      if (obj.addEventListener) {
        obj.addEventListener(type, eventFn);
      } else {
        obj.attachEvent("on" + type, eventFn);
      }
      function eventFn(ev) {
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        fn && fn(target, ev)
      }
    }

事件代理

• 定义：指利用“事件冒泡”，只通过指定一个事件处理程序，来管理某一类型的所有事件
• 优点：

  （1）可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒

  （2）可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适

• 缺点：仅限于上述需求下，如果把所有事件都用代理就可能会出现事件误判，即本不应用触发事件的被绑上了事件
• demo: 把动态列表的点击事件，绑定在父元素上

事件对象Event

元素进行事件监听的时候，它的回调函数里就会默认传递一个参数 event，它是一个对象

• 属性：

  • event.target：指的是触发事件的那个节点，也就是事件最初发生的节点(fn触发的元素)
  • event.currentTarget：指的是正在执行的监听函数的那个节点(fn绑定的元素)
  • event.isTrusted：表示事件是否是真实用户触发。
  • event.preventDefault()：取消事件的默认行为。
  • event.stopPropagation()：阻止事件的派发（包括了捕获和冒泡）
  • event.stopImmediatePropagation()：阻止同一个事件的其他监听函数被调用。
• target和currentTarget区别：触发事件的元素和事件绑定的元素

• stopPropagation和stopImmediatePropagation区别：

  • stopPropagation只对书写的那个事件有用，再绑定另一个click失效
  • stopImmediatePropagation对绑定的很多类型的事件都有用
• 兼容写法： ev.target || ev.srcElement

addEventListener(W3C)

• 参数：

  • 事件名称 event
  • 事件处理函数/具有 handleEvent函数的对象 listener

  • 第三个参数

    • once：只执行一次
    • passive：承诺此事件监听不会调用 preventDefault，这有助于性能
    • useCapture：是否捕获true（否则冒泡false）
• 移除：removeEventListener(事件名称、事件回调、捕获/冒泡)

自定义事件：

只能在DOM元素上自定义事件

//使用 Event 构造器来创造了一个新的事件
var evt = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(evt);

面试题

• 了解js的事件吗？
• 说说js的事件/绑定事件的方法?/了解事件流吗？
• 事件流的顺序是什么？

补充

• React组件中怎么做事件代理
• React组件事件代理的原理
• React的事件合成机制好像和js的不太一样 （绑定一个事件到一个组件上）
• Emit事件怎么发，需要引入什么
• 页面上生成一万个button，并且绑定事件，如何做（JS原生操作DOM）
• 添加原生事件不移除为什么会内存泄露
• vue 中的 native 修饰符
• 移动端点击穿透：fastclick
• 手写原生js实现事件代理，并要求兼容浏览器
• 事件如何派发也就是事件广播（dispatchEvent
• 总结：https://www.cnblogs.com/dfyg-...
• 手写一个冒泡排序处理事务