“停止事件冒泡“和”阻止浏览器的默认行为“，

“停止事件冒泡“和”阻止浏览器的默认行为“，这两个概念非常重要，它们对复杂的应用程序处理非常有用。

1.停止事件冒泡

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

2.阻止事件的默认行为

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

停止事件冒泡的处理方法：

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

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

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

1 function someHandle(event) { 2   event.stopPropagation(); 3 }

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

1 function someHandle(event) { 2   event = event || window.event; 3   if(event.stopPropagation){ 4     event.stopPropagation(); 5   }else { 6     event.cancelBubble = true; 7   } 8 }

 

阻止事件的默认行为的处理方法

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

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

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

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

1 function someHandle(event) { 2   event.preventDefault(); 3 }

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

1 function someHandle(event) { 2   event = event || window.event; 3   if(event.preventDefault){ 4     event.preventDefault(); 5   }else{ 6     event.returnValue = false; 7   } 8 }

完整的事件处理兼容性函数 

 1 var EventUtil = {  2   addHandler: function(element, type, handler){  3     if (element.addEventListener){  4       element.addEventListener(type, handler, false);  5     } else if (element.attachEvent){  6       element.attachEvent("on" + type, handler);  7     } else {  8       element["on" + type] = handler;  9     } 10   }, 11   removeHandler: function(element, type, handler){ 12     if (element.removeEventListener){ 13       element.removeEventListener(type, handler, false); 14     } else if (element.detachEvent){ 15       element.detachEvent("on" + type, handler); 16     } else { 17       element["on" + type] = null; 18     } 19   }, 20   getEvent: function(event){ 21     return event ? event : window.event; 22   }, 23   getTarget: function(event){ 24     return event.target || event.srcElement; 25   }, 26   preventDefault: function(event){ 27     if (event.preventDefault){ 28       event.preventDefault(); 29     } else { 30       event.returnValue = false; 31     } 32   }, 33   stopPropagation: function(event){ 34     if (event.stopPropagation){ 35       event.stopPropagation(); 36     } else { 37       event.cancelBubble = true; 38     } 39 };

 

“停止事件冒泡“和”阻止浏览器的默认行为“，这两个概念非常重要，它们对复杂的应用程序处理非常有用。

1.停止事件冒泡

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

2.阻止事件的默认行为

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

停止事件冒泡的处理方法：

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


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

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


1 function someHandle(event) {
2   event.stopPropagation();
3 }

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


复制代码

1 function someHandle(event) {
2   event = event || window.event;
3   if(event.stopPropagation){
4     event.stopPropagation();
5   }else {
6     event.cancelBubble = true;
7   }
8 }

复制代码
  
阻止事件的默认行为的处理方法

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

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


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

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


1 function someHandle(event) {
2   event.preventDefault();
3 }

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


复制代码

1 function someHandle(event) {
2   event = event || window.event;
3   if(event.preventDefault){
4     event.preventDefault();
5   }else{
6     event.returnValue = false;
7   }
8 }

复制代码

完整的事件处理兼容性函数  


复制代码

 1 var EventUtil = {
 2   addHandler: function(element, type, handler){
 3     if (element.addEventListener){
 4       element.addEventListener(type, handler, false);
 5     } else if (element.attachEvent){
 6       element.attachEvent("on" + type, handler);
 7     } else {
 8       element["on" + type] = handler;
 9     }
10   },
11   removeHandler: function(element, type, handler){
12     if (element.removeEventListener){
13       element.removeEventListener(type, handler, false);
14     } else if (element.detachEvent){
15       element.detachEvent("on" + type, handler);
16     } else {
17       element["on" + type] = null;
18     }
19   },
20   getEvent: function(event){
21     return event ? event : window.event;
22   },
23   getTarget: function(event){
24     return event.target || event.srcElement;
25   },
26   preventDefault: function(event){
27     if (event.preventDefault){
28       event.preventDefault();
29     } else {
30       event.returnValue = false;
31     }
32   },
33   stopPropagation: function(event){
34     if (event.stopPropagation){
35       event.stopPropagation();
36     } else {
37       event.cancelBubble = true;
38     }
39 };

复制代码