事件机制之事件冒泡与事件捕获

| |

前言

dom事件流的三个阶段：

  • 事件捕获阶段 capturing：从外到里进行事件传播，从根节点开始
  • 目标阶段
  • 事件冒泡阶段 bubbling：从里到外进行事件传播，直到根节点

触发dom事件时，先进行事件捕获 外->里，捕获到事件源之后通过事件传播，再进行事件冒泡 里 -> 外。

事件绑定

  • addEventListener(event, listener, userCapture)（ie11及以上，支持事件捕获）
    • event: string
    • listener: Function 事件监听函数
      1. e.stopPropagation() 阻止事件冒泡到父元素
      2. e.preventDefault() 阻止浏览器默认行为：如阻止href，input提交
      3. e.stopImmediatePropagation()
      4. return false，包括
        • 1 阻止冒泡
        • 2 阻止默认行为
        • 停止回调函数并立即返回
    • useCapture : boolean
      • 默认为 false，采用事件冒泡的方式
      • true，采用事件捕获的方式
  • attachEvent(event, listener)（ie10及以下，不支持事件捕获）
    • event
    • listener

事件委托

  • 一般用于动态生成的dom
  • $(selector).on(event, childSelector, data, function, map)
  • 通过父元素的事件绑定，判断目标元素是否为子元素