冒泡和捕获

165 阅读1分钟

DOM事件流有三个阶段,事件捕获阶段,处于目标阶段,事件冒泡阶段

捕获

当一个子标签触发某一个事件(比如click)后,该事件会从顶级父标签一级一级往该标签传递,这个过程叫做捕获(挖洞)

冒泡

当找到该子标签之后事件会再从子标签开始一级一级往父标签传递,这个过程叫做冒泡

  • 无论是事件捕捉还是事件冒泡都有一个共同的行为,就是事件传播
  • dom标准事件流的触发的先后顺序为:先捕获再冒泡,即当触发dom事件时,会先进行事件捕获,捕捉到事件源之后通过事件传播进行事件冒泡

阻止冒泡

  • event.stopPropagation() 事件处理过程中,阻止了事件冒泡,但不会阻击默认行为
  • return false 事件处理过程中,阻止了事件冒泡,也阻止了默认行为
  • event.preventDefault() 事件处理过程中,不阻击事件冒泡,但阻击默认行为

事件委托

用事件冒泡的原理,自己所触发的事件, 让他的父元素代替执行

优点

  • 减少内存消耗
  • 动态绑定事件