事件冒泡
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