事件模型和事件委托

事件模型

一个事件发生后,会在子元素和父元素之间传播。
这种传播分成三个阶段。

window→documen→...→目标节点
第一阶段:捕获阶段,从window对象传导到目标节点
第二阶段:目标阶段,事件在目标节点上触发
第三阶段:冒泡阶段,从目标节点传回window对象
IE678的事件模型只有冒泡阶段。

总结:
"DOM2级事件"规定事件流的三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,为截获事件提供了机会;然后是实际的目标接收到事件;最后一个阶段是冒泡阶段,可以在这个阶段对事件作出响应,
即:事件捕获->事件处理->事件冒泡

阻止事件冒泡

event.stopPropagation()
stopImmediatePropagation方法阻止同一个事件的其他监听函数被调用,不管监听函数定义在当前节点还是其他节点。也就是说,该方法阻止事件的传播,比Event.stopPropagation()更彻底。
event.stopImmediatePropagation()
event.cancelBubble()
IE阻止事件冒泡

事件委托

事件委托原理:事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li;比如给最里面的li加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。

案例:

  • aa
  • bb
  • cc

你可能感兴趣的:(基础)