一、事件的类型

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。
事件顺序有两种类型：事件捕捉和事件冒泡。

1.1 冒泡型事件(Event Bubbling)

这是IE浏览器对事件模型的实现，也是最容易理解的，至少笔者觉得比较符合实际的。冒泡，顾名思义，事件像个水中的气泡一样一直往上冒，直到顶端。从DOM树型结构上理解，就是事件由叶子节点沿祖先结点一直向上传递直到根节点；从浏览器界面视图HTML元素排列层次上理解就是事件由具有从属关系的最确定的目标元素一直传递到最不确定的目标元素.冒泡技术.冒泡型事件的基本思想,事件按照从特定的事件目标开始到最不确定的事件目标.

1.2 捕获型事件(Event Capturing)

Netscape 的实现，它与冒泡型刚好相反，由DOM树最顶层元素一直到最精确的元素，这个事件模型对于开发者来说（至少是我…）有点费解，因为直观上的理解应该如同冒泡型，事件传递应该由最确定的元素，即事件产生元素开始。

1.3 DOM标准的事件模型

我们已经对上面两个不同的事件模型进行了解释和对比。DOM标准同时支持两种事件模型，即捕获型事件与冒泡型事件，但是，捕获型事件先发生。两种事件流都会触发DOM中的所有对象，从document对象开始，也在document对象结束（大部分兼容标准的浏览器会继续将事件是捕捉/冒泡延续到window对象）。

如图：首先是捕获式传递事件，接着是冒泡式传递，所以，如果一个处理函数既注册了捕获型事件的监听，又注册冒泡型事件监听，那么在DOM事件模型中它就会被调用两次。

DOM标准的事件模型最独特的性质是,文本节点也会触发事件(在IE不会)。

二、停止事件冒泡和阻止事件的默认行为

2.1 停止事件冒泡

停止事件冒泡是指，停止冒泡型事件的进一步传递（取消事件传递,不只是停止IE和DOM标准共有的冒泡型事件，我们还可以停止支持DOM标准浏览器的捕捉型事件，用topPropagation()方法）。例如上图中的冒泡型事件传递中，在body处理停止事件传递后，位于上层的document的事件监听器就不再收到通知，不再被处理。

停止事件冒泡的处理方法：
在IE下,通过设置event对象的cancelBubble为true即可。

function someHandle() {
  window.event.cancelBubble = true;
}

DOM标准通过调用event对象的stopPropagation()方法即可。

function someHandle(event) {
  event.stopPropagation();
}

因些，跨浏览器的停止事件传递的方法是:

function someHandle(event) {
   event = event || window.event;
   if(event.stopPropagation){
     event.stopPropagation();
   }else {
     event.cancelBubble = true;
   }
 }

2.2 阻止事件的默认行为

停止事件的默认行为是指，通常浏览器在事件传递并处理完后会执行与该事件关联的默认动作（如果存在这样的动作）。例如，如果表单中input type 属性是 “submit”，点击后在事件传播完浏览器就自动提交表单。又例如，input 元素的 keydown 事件发生并处理后，浏览器默认会将用户键入的字符自动追加到 input 元素的值中。

阻止事件的默认行为的处理方法
就像事件模型和事件对象差异一样，在IE和其它所有浏览器中阻止事件的默认行为的方法也不同。

在IE下,通过设置event对象的returnValue为false即可。

function someHandle() {
  window.event.returnValue = false;
}

DOM标准通过调用event对象的preventDefault()方法即可。

 function someHandle(event) {
  event.preventDefault();
}

因些，跨浏览器的取消事件传递后的默认处理方法是：

function someHandle(event) {
   event = event || window.event;
   if(event.preventDefault){
     event.preventDefault();
   }else{
     event.returnValue = false;
   }
 }

//阻止冒泡事件
evt.stopPropagation(); // 只执行button的click，如果注释掉该行，将执行button、p和div的click （同类型的事件）

https://www.cnblogs.com/binyong/articles/1750263.html