事件的传播流程

事件 

JavaScript和HTML的交互是通过事件来实现的

事件是某个行为或者触发，比如点击、移动鼠标：

1 当用户点击鼠标时

2 当网页已加载时 

3 当图像已加载时 

4 当鼠标移动到元素上时 

5 当用户按键触发时

事件的传播机制，三个阶段：

捕获阶段：从外向内依次查找元素

不太具体节点更早接受事件，而最具体的元素最后接受事件，和事件冒泡相反  

目标阶段：当前事件源（当前触发的这个元素)本身的操作

冒泡阶段：从内到外依次触发相关的行为

事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的元素

---

     

click

      如果对这两个节点的click事件都设定监听函数，则click事件会被触发四次。

和

节点的捕获阶段和冒泡阶段各一次：

捕获阶段：事件从

向

传播时，触发

的click事件；

目标阶段：事件从

到达

时，触发

的click事件；

目标阶段：事件离开

时，触发

的click事件；

冒泡阶段：事件从

传回

时，再次触发

的click事件。

阻止事件传播

      stopPropagation()方法阻止事件在DOM中继续传播，即取消进一步的事件捕获或冒泡，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上新定义的事件监听函数。

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

取消默认事件

preventDefault()方法

    preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？例如 ：a标签的 href 和click事件跳转，提交按钮等

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;