Javascript事件-事件冒泡，事件捕获，事件监听和事件委托

作者: 肆意咯咯咯 | 来源:发表于2018-04-24 17:39 被阅读0次

事件处理机制

（一）DOM事件流

DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML元素上产生一个事件时，该事件会在DOM树中元素结点与根节点之间按特定的的顺序传播，路径所经过的结点都会收到该事件，这个传播过程就是DOM事件流。

DOM事件标准定义了两种事件流，分别是捕获事件和冒泡事件。

1.冒泡事件流（IE）

默认情况下，事件使用冒泡事件流。当事件（例如单击事件）在某一DOM元素上被触发时，事件将沿着该节点的各个父节点冒泡穿过整个DOM节点层次。在冒泡过程中任何时候都可以终止事件的冒泡。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。

button——>body——>html——>document(冒泡从里向外走)

2.捕获事件流

与冒泡模型相反，在捕获事件流模型中，事件的处理将从 DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档的根到事件目标元素之间各个继承派生的元素所捕获。

document——>html——>body——>div(捕获从外向里走)

3.DOM标准的事件模型

DOM标准同时支持捕获事件模型和冒泡事件模型，但是捕获事件模型先发生。两种事件流都会触发DOM中的所有对象，从document对象开始，也在document对象结束。

4.事件传导的三个阶段

（1）事件捕获（Capturing）阶段：事件将沿着DOM树向下传送，经过目标节点的每一个祖先元素，直至目标节点，例如，用户单击了一个超链接，则该单击事件将从document节点传送到html 元素，body元素以及包含该链接的p元素。目标节点就是事件的DOM节点。

（2）目标（target）阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的监听器后，就会运行该监听器。

（3）冒泡（Bubbling）阶段：事件将沿着DOM树向上传送，再次逐个访问目标元素的祖先节点直到document节点。该过程中的每一步，浏览器都将检测那些不是捕获事件监听器的事件监听器并执行它们（即与触发事件无关的事件监听器也由于冒泡将被执行）。

（二）阻止事件冒泡

浏览器兼容


var ev = （ev）？ev：window.event;//获取IE或非IE浏览器的事件

if(window.event){//如果是IE浏览器

ev.cancelBubble = true;//IE浏览器，设置该属性为true,取消事件冒泡

}

else{

ev.stopPropagation();//非IE浏览器，该方法取消事件的进一步捕获或冒泡。

}

（三）阻止事件的默认行为

事件的默认行为是指浏览器在事件传递和处理完成后自动执行的与该事件关联的默认动作。例如，单击一个超链接的默认行为是访问其定义的的URL。

在IE中，可以通过设置event对象的returnValue属性为false来阻止事件的默认行为；

在其他浏览器中，可以通过设置event对象的preventDefault（）方法来实现。

function stopDefault（e）{

if（e&&e.preventDefault){//判断浏览器是非IE浏览器

e.preventDefault();//非IE浏览器下使用preventDefault方法

}

else{

//IE浏览器下令事件（window.event）的returnValue属性为false；

window.event.returnValue=false;

}

return false;

}

（四）事件绑定

（1）在DOM元素中直接绑定

我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。

function hello(){

alert("hello world!");

}

（2）在JavaScript代码中绑定

在JavaScript代码中（即script标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

document.getElementById("btn").onclick = function(){

alert("hello world!");

}

（3）使用事件监听绑定事件

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段，目标阶段，冒泡阶段

W3C规范：

element.addEventListener(event,function,useCapture)

event:（必需）事件名，支持所有DOM事件。

function:(必需)指定要事件触发时执行的函数。

useCapture：（可选）指事件是否在捕获或冒泡阶段执行。true，捕获阶段执行false，冒泡阶段执行，默认为false。

IE标准

element.attachEvent(event,function)

event ：（必需）事件类型。需要加“on”，例如：onclick

function:(必需)指定要事件触发时执行的函数。

事件监听的优点：

1.可以绑定多个事件

常规的事件绑定只执行最后绑定的事件

var btn3 = document.getElementById("btn3");

btn3.onclick = function(){

alert("hello 1"); //不执行

}

btn3.onclick = function(){

alert("hello 2"); //执行

}

事件监听可以执行多个绑定事件

var btn4 = document.getElementById("btn4");

btn4.addEventListener("click",hello1);

btn4.addEventListener("click",hello2);

function hello1(){

alert("hello 1");

}

function hello2(){

alert("hello 2");

}

（2）可以解除相应的绑定

removeEventListener（event，function）

var btn5 = document.getElementById("btn5");

btn5.addEventListener("click",hello1);//执行了

btn5.addEventListener("click",hello2);//不执行

btn5.removeEventListener("click",hello2);

function hello1(){

alert("hello 1");

}

function hello2(){

alert("hello 2");

}

（3）封装事件监听

//绑定监听事件

function addEventHandler(target,type,fn){

if(target.addEventListener){

target.addEventListener(type,fn);

}else{

target.attachEvent("on"+type,fn);

}

}

//移除监听事件

function removeEventHandler(target,type,fn){

if(target.removeEventListener){

target.removeEventListener(type,fn);

}else{

target.detachEvent("on"+type,fn);

}

}

//测试

var btn5 = document.getElementById("btn5");

addEventHandler(btn5,"click",hello1);//添加事件hello1

addEventHandler(btn5,"click",hello2);//添加事件hello2

removeEventHandler(btn5,"click",hello1);//移除事件hello1

（五）事件委托

事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。只制定一个事件处理程序，就可以管理某一类型的所有事件。例如click事件一直会冒泡到document层。也就是我们可以只指定onclick事件处理程序，而不必给每个事件分别添加处理程序。

var btn6 = document.getElementById("btn6");

document.onclick = function(event){

event = event || window.event;

var target = event.target || event.srcElement;

if(target == btn6){

alert(btn5.value);

}

}

JQuery live（），delegate(),bind(),on()等方法

事件委托优点

1.提高JavaSCript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用。

varitem1 = document.getElementById("item1");

varitem2 = document.getElementById("item2");

varitem3 = document.getElementById("item3");

document.addEventListener("click",function(event){

 vartarget = event.target;

 if(target == item1){

 alert("hello item1");

 }elseif(target == item2){

 alert("hello item2");

 }elseif(target == item3){

 alert("hello item3");

 }

})

（2）动态的添加DOM元素，不需要因为元素的改动而修改事件绑定

传统写法

var list = document.getElementById("list");



var item = list.getElementsByTagName("li");

for(var i=0;i

 (function(i){

 item[i].onclick = function(){

 alert(item[i].innerHTML);

 }

 })(i)

}



var node=document.createElement("li");

var textnode=document.createTextNode("item4");

node.appendChild(textnode);

list.appendChild(node);

点击item1到item3都有事件响应，但是点击item4时，没有事件响应。说明传统的事件绑定无法对动态添加的元素而动态的添加事件。

事件委托

var list = document.getElementById("list");

document.addEventListener("click",function(event){

 var target = event.target;

 if(target.nodeName == "LI"){

 alert(target.innerHTML);

 }

})

var node=document.createElement("li");

var textnode=document.createTextNode("item4");

node.appendChild(textnode);

list.appendChild(node);

当点击item4时，item4有事件响应。说明事件委托可以为新添加的DOM元素动态的添加事件。

事件委托的方法

http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

$("#btn").click(function(){

  $("div").append("

这是一个新的p元素

");

});



######bind（）

用法：$("div p").bind("click", function () {

    alert($(this).text());

})

问题：（1）用了隐式迭代的方法，如果匹配到的元素特别多的时候，比如如果我在div里放了50个p元素，就得执行绑定50次。对于大量元素来说，影响到了性能。

但是如果是id选择器，因为id唯一，用bind()方法就很快捷了。

（2）对于尚未存在的元素，无法绑定。点击页面上的按钮，将动态添加一个p元素，点击这个p元素，会发现没有动作响应。

######delegate（）

用法

$("div").delegate("p", "click", function () {

    alert($(this).text());

});

这种方式采用了事件委托的概念。不是直接为p元素绑定事件，而是为其父元素（或祖先元素也可）绑定事件，当在div内任意元素上点击时，事件会一层层从event target向上冒泡，直至到达你为其绑定事件的元素，如此例中的div元素。冒泡的过程中，如果事件的currentTarget与选择器匹配时，就会执行代码。

这样就解决了用bind()方法的上面两个问题，不用再一个个地去为p元素绑定事件，也可以为动态添加进来的p元素绑定。甚至，如果你将事件绑定到document上，都不用等document准备好就可执行绑定。

这样，绑定是容易了，但是调用的时候也可能出现问题。如果事件目标在DOM树中很深的位置，这样一层层冒泡上来查找与选择器匹配的元素，又影响到性能了。

######on（）

on()其实是将以前的绑定事件方法作了统一，查看jQuery无压缩的源码（我这里看的版本是1.11.3），可以发现无论bind()还是delegate()其实都是通过on()方法实现的，只是参数不同罢了。

源码： bind: function( types, data, fn ) {

     return this.on( types, null, data, fn );

    },

    unbind: function( types, fn ) {

     return this.off( types, null, fn );

    },

    delegate: function( selector, types, data, fn ) {

     return this.on( types, selector, data, fn );

    }

    undelegate: function( selector, types, fn ) {

 // ( namespace ) or ( selector, types [, fn] )

     return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );

    }

$("div").on("click","p",function(){

    alert($(this).text());

})

官方文档建议，尽量使用on（）来绑定事件。

移除事件：

$( "div p" ).unbind( "click", handler );

$( "div" ).undelegate( "p", "click", handler );

$( "div" ).off( "click", "p", handler );

不传入参数，移除所有事件绑定

######事件委托总结：

1.选择器匹配到的元素比较多时，不要用bind()迭代绑定

2.用id选择器时，可以用bind()

3.需要给动态添加的元素绑定时，用delegate()或者on()

4.用delegate()和on()方法，dom树不要太深

5.尽量使用on()