js高级程序设计笔记——13章事件

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" onclick="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 。