JS-事件流简要分析

139 阅读1分钟

事件冒泡

Netscape认为,石头先扔进河里,再从河里确定了一个扔石头的点,从外往内逐渐精确的过程(捕获)

w3c认为,石头扔进去先到达准确的那个点,涟漪从内往外扩散(冒泡)

事件流:事件执行的顺序

子元素的事件被触发时,父级也会被触发(冒泡)

一个完整事件包含 捕获阶段 ---> 目标阶段 --->冒泡阶段

冒泡是可以阻止的

 e.stopPropagation( );
 e.cancelBubble=true;//兼容IE

事件监听

DOM0级事件处理,是一种赋值方式,是被所有浏览器所支持的,简单易懂容易操作;

DOM2级事件处理是所有DOM节点中的方法,可以重复绑定,但是浏览器兼容存在问题;

//DOM0级
oDiv.onclick = function(){ .... }    

//DOM2级
if(window.attachEvent){
    oDiv.attachEvent("onclick", function(){ ... });  // IE只有冒泡阶段,所以没有第三个参数,而且需要加on;
}else{
    oDiv.addEventListener( "click", function(){ ... },false);  // false指冒泡阶段
}

//移除事件监听,第二个参数为必须,移除的事件处理函数
oDiv.removeEventListener( "click",fn)
oDiv.detachEvent("onclick",fn)

事件委托(事件代理)委派

什么是事件委托:全班同学都要做《五年高考三年模拟》,每个同学自己去书店买?不用,委托老师帮你们买,同学们只管认真做题就好啦,好开心。

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以处理某一类型的所有事件 使用场景主要用于事件源不确定的情况,可以把事件委托给父级

判断事件源:

e.target || e.srcElement