javascript事件

解释以下概念：事件传播机制、阻止传播、取消默认事件、事件代理。

• 事件传播机制
  事件传播机制分为三个阶段

1. 事件捕获阶段：事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行。(ie低版本没有捕获）
2. 事件处理阶段：事件到达目标元素,执行目标元素的事件处理函数.
3. 事件冒泡阶段：从捕获到事件源的元素开始往父级元素进行事件冒泡，DOM0级事件中，事件绑定函数的触发都发生在冒泡阶段

• 阻止传播
  stopPropagation()取消事件进一步捕获或冒泡
• 取消默认事件
  preventDefault()取消事件默认行为，比如a链接和submit按钮的自动跳转等
• 事件代理
  要理解事件代理,首先要明白什么是事件冒泡:当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。
  事件代理的步骤

1. 父元素绑定事件
2. 父元素知道事件的实际发生目标是谁
3. 我们要对目标进行判断，如果是我们需要的元素，则发生回调函数
   事件代理的优点:
4. 性能不小心得到了优化
5. 动态添加的元素也能绑定事件了

一个演示事件传播的过程及演示阻止传播的效果的demo。

代码地址
预览地址
在box阶段加上阻止事件冒泡控制

• 事件传播与阻止事件传播事例

1. 点击hello

   
   1.png

2. 点击box

   
   2.png

3. 点击container

   
   3.png