JavaScript基础_13事件绑定函数+监听函数+冒泡事件流

1 Event对象

1.1表示事件的状态

1.2 包含的信息：1）导致事件的元素，2）事件的类型，3）与特定事件相关的信息

1.3 用法：通常与函数一起使用

2 事件绑定方式

2.1 监听函数：事件发生时，程序所执行的函数

2.2 事件绑定函数的方式

2.2.1 直接作用域html中的函数

<divonclick="alert(123)"></div>

2.2.2 DOM0级事件处理函数

var div =document.getElementsByTagName("div")[0];div.onclick = function(){};

2.2.3 DOM2提供的事件绑定函数

addEventListioner()添加事件函数

removeEventListioner()移出事件函数

注意：添加事件函数和移出事件函数再IE9以下不支持

2.2.4 三种事件绑定的优缺点

2.2.4.1作用与标签中<divonclick="alert(123)"></div>绑定方式

1）存在加载html与JS代码时间差,导致不能够运行出我们想要的结果

2）html与js耦合度非常高,修改起来不方便

2.2.4.2 DOM0级事件处理函数

div.onclick = function(){              this.className="";       };div.onclick = null;// 给事件移出监听函数

DOM0级事件处理函数被认为是该元素的方法,也就是在元素的作用域中运行的,所以程序中的this引用的是当前对象,因此可以在事件程序中可以通过this来访问元素的任何属性和方法.

2.2.4.3 添加和移出事件监听函数addEventListener()和removeEventListener()

1）可以针对同一事件添加多个监听函数

2）可以指定该监听函数触发在哪个阶段(通过第三个参数控制)

3）除了作用于DOM节点上,还可以作用于window,XMLHttpRequest等对象上

3 事件监听函数

3.1 添加事件监听addEventListener()

作用于当前节点或对象上,定义一个特定事件的监听函数：

target.addEventListener(type,listener[,useCapture])

参数说明：

type:事件名称,大小写敏感

listener:监听函数,事件发生时,会调用该函数

useCapture:布尔值,表示监听函数是否在事件捕获阶段进行触发，默认值false(监听函数只会在冒泡阶段触发)

3.2 移出事件监听函数removeEventListener（）

作用于当前节点或对象上,移出一个特定事件的监听函数：

target.removeEventListener(type,listener[,useCapture])

参数说明同addEventListener()

3.3 应用举例

3.3.1 例一

function test(a,b,c){       alert(12);}var div =document.querySelector("div");div.addEventListener('click',test,false);//12，添加点击事件监听函数test(),在冒泡阶段触发div.removeEventListener('click',test,false);//移出事件

注意：1）removeEventListener不能移出为事件添加的匿名函数

2）removeEventListener移出的监听函数,必须与对应的addEventListener方法上的参数完全一致,必须作用于同一节点上

3.3.2 例二，向监听函数传参

var i = 0;function func(a,b){       i++;       alert(i);       alert(a+b);}div.addEventListener('click',function(){func(12,23);},false);//会执行div.addEventListener('click',func,false);//会执行div.addEventListener('click',func,false);//不会执行

注意：

1）如果为一个事件连续添加多个相同的监听函数,只会触发第一个,其它会自动去除；

2）如果为一个事件连续添加多个不相同的监听函数(如匿名函数),则这些监听函数会按照先添加先触发的顺序进行依次触发；

3）通过addEventListener添加的监听事件必须由removeEventListener进行移出,否则无效

3.4 IE9以下事件监听函数

attachEvent(type,listener) 给事件添加监听函数

detachEvent(type,listener) 移出事件的监听函数

4 DOM事件流

4.1 介绍

4.1.1事件发生时会在当前元素节点与根节点之间按照特定的顺序传递,路径所经过的节点都会受到该事件,所以这个传播过程我们称之为DOM事件流.

4.1.2按照事件传递方向分为:捕获事件流和冒泡事件流

捕获事件流:从DOM树的根到叶子,也就是事件传播从最不特定的事件目标到特定的事件目标

冒泡事件流:从DOM树的叶子到根,也就是事件传播从最特定的事件目标到不特定的事件目标

4.2 冒泡事件流

4.2.1 冒泡顺序

举例说明：

定义三个依次嵌套的div，分别添加点击事件

<div id="div0">       <divid="div1">              <divid="div2"></div>       </div></div><scripttype="text/javascript">window.onload = function(){var div2 =document.querySelector("#div2");var div1 =document.querySelector("#div1");var div0 = document.querySelector("#div0");div2.onclick =function(){alert("div2");};div1.onclick =function(){alert("div1");};div0.onclick =function(){alert("div0");};</script>

当点击div2时可以看到依次弹出，div2,div1,div0，实际上，冒泡还会持续到根节点document

顺序为：div2--->div1--->div0-->body--->html-->document

4.2.2 阻止冒泡事件流的三种方式

4.2.2.1 使用cancelBubble方法阻止冒泡

上例中，点击div2后，若只使div2弹出，可以在点击事件中添加方法event. cancelBubble = true;

即div2.onclick = function(){alert("div2");event.cancelBubble = true;};

4.2.2.2 使用stopPropagation()或stopImmediatePropagation()方法阻止冒泡

即上例中div2.onclick =function(){alert("div2");event.stopPropagation();};

或者div2.onclick =function(){alert("div2");event.stopImmediatePropagation();};

两种方法的区别：

1）event.stopPropagation()阻止事件在DOM上继续传播,防止再触发定义在其它节点的监听函数.但不包含在当前节点新定义的事件监听函数；

2）stopImmediatePropagation()阻止事件在DOM上继续传播,防止再触发定义在其它节点的监听函数，如果同一节点对同一个事件指定了多个监听函数,只要其中一个监听函数使用了stopImmediatePropagation()方法,该监听函数后面的监听函数就不会再执行。