冒泡事件和默认事件

浅浅的花香味﹌ 2022-12-23 06:42 156阅读 0赞

### 什么是冒泡事件 ###

在一个对象上触发某类事件（比如单击click事件），如果对象定义了此事件处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件的处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至他被处理（腹肌对象的所有同类事件都将被激活），或者他达到了对象层次的最顶级，即document对象（有些浏览器是window）

### 什么是默认事件 ###

浏览器的一些默认行为。例如：点击超链接跳转，滑动滚动条控制滚动条  
滚动  
事实上stoppropagation和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。  
不同之处在于stoppropagation属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器中已经支持。

### 如何阻止冒泡事件（W3C） ###

阻止冒泡事件，不让事件向window蔓延，默认事件依旧会执行

document.getElementById("box").addEventListener("click", function(event){ 
     var event = event || window.event;
     event.stoppropagation ? event.stoppropagation() :  event.cancelBubble=true;
    
    });

### 如何阻止默认事件（W3C） ###

阻止默认事件完成后会发生冒泡事件，冒泡会传递到上一层的父元素

document.ggetElementsByTagName("a").addEventListener("click", function(e){ 
    	e = e || window.e;
    	e.preventDefault ? e.preventDefault() : e.returnValue = false; 
    });

### 事件注意点 ###

event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等；  
event对象只在事件发生的过程中才有效。  
firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。  
在IE/Opera中是window.event，在Firefox中是event；而事件的对象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中两者都可用。

下面两句效果相同：

function a(e){ 
    	var e = (e) ? e : ((window.event) ? window.event : null); 
    	var e = e || window.event; // firefox下window.event为null, IE下event为null
    }