13.1 事件流
13.1.1 事件冒泡
在ie下 事件流叫做事件冒泡 顺序是由最具体的元素接收,然后不断的向上传播到较不具体的节点
例如 你点击了某个div 那这个click事件就会按如下顺序传播
div->body->document->window; 基本游览器都支持;
13.1.2 事件捕获
事件捕获的顺序是 window->document->body->div;
推荐使用事件流;
如图是两者的顺序
13.2 事件处理程序
事件可以是click load mouseover等,都是事件的名称。
事件处理程序则是响应某个事件的函数,或者叫事件侦听器;
13.2.2 DOM0级事件处理程序
0级DOM
分为2个:一是在标签内写onclick事件
二是在JS写onlicke=function(){}函数
1)
<input id="myButton" type="button" value="Press Me" οnclick="alert('thanks');" >
2)
document.getElementById("myButton").onclick = function () { alert('thanks'); }
2级DOM
只有一个:监听方法,有两个方法用来添加和移除事件处理程序:addEventListener()和removeEventListener()。
它们都有三个参数:第一个参数是事件名(如click);
第二个参数是事件处理程序函数;
第三个参数如果是true则表示在捕获阶段调用,为false表示在冒泡阶段调用。
- addEventListener():可以为元素添加多个事件处理程序,触发时会按照添加顺序依次调用。只能用removeEventListener()来移除添加的事件;
- removeEventListener():不能移除匿名添加的函数。
document.getElementById("myTest").attachEvent("onclick", function(){alert(1)});
//等价于
document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false);
var btn=document.getElementById('btn');
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.removeEventListener("click",function(){
alert(this.id);
},false) //无效
removeEventListener传入的参数与addEventListener传入的参数是完全不同的匿名函数。
改成如下则有效果
var headler=function(){
alert(this.id);
}
btn.addEventListener("click",headler,false);
btn.removeEventListener("click",headler,false);
只有2级DOM包含3个事件:事件捕获阶段、处于目标阶段和事件冒泡阶段
<span> <a></a> </span>
点击a后capturing(捕捉)阶段事件传播会从document-> span->a,然后发生在a,最后bubbling(冒泡)阶段事件传播会从a->span->document 。