js事件事件委托

Posted 风吹De麦浪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js事件事件委托相关的知识,希望对你有一定的参考价值。

事件流 

事件流:页面中接收事件的顺序;

IE的事件流是冒泡流,其他的浏览器是捕获流,如下图;

DOM事件流

DOM 事件流同时支持这两种事件流,并且规定DOM任何事件流都包含三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段;

注册事件

之前注册事件的方法或多或少都会存在一些问题,现在通常是使用AddEventlistener()来注册事件/监听事件,与之对应的还有removeEventListener()来删除事件;

所有DOM节点都有这两个方法,并且他们都是接收3个参数(事件类型,事件处理,boolean),第三个参数如果是在冒泡阶段处理是false,反之true;

建议将事件处理程序添加到事件冒泡阶段,这样可以最大限度的兼容各种浏览器;

1 var btn=document.getElementById("btn1");
2 btn.addEventListener("click",function(){alert("hello")},false);

关于事件这里差不多了没多少东西;

委托事件

一开始我以为js中的委托事件跟.net中的delegate(委托)是一个概念,其实不是这样,js中的委托事件其实是利用事件冒泡到父节点,通过父节点来监听事件,在通过事件对象来判断是那个元素,然后相应的处理;

event 事件对象:在触发DOM上任何事件都会产生这个event对象,这个对象包含了所有与事件相关的信息(很强大的一个对象具体的可以自己查相关资料);

委托实例

这里的委托还是挺容易理解的,就是委托别人来帮你做事情,根据我前面说的原理,翻译从html应该是这样的:本来是该你这个节点上该做的事情,现在委托了父节点来做;

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
<script>

window.onload = function(){
var oUl = document.getElementById("ul");
oUl.addEventListener("mouseover",mouseoverDemo,false);
oUl.addEventListener("mouseout",mouseoutDemo,false);

function mouseoverDemo(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement; //兼容IE
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red";
}
}
function mouseoutDemo(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "";
}
}
}

</script>
</html>
 

委托事件优点

1、相比之前遍历每一个li在绑定一个事件感觉爽了很多;

2、很明显没有了for 性能肯定是有提升;

3、动态的添加新的元素还是会有之前的事件(因为不管怎么样还是要冒泡到父元素的嘛);

 

内容很少都是些基础;

 

以上是关于js事件事件委托的主要内容,如果未能解决你的问题,请参考以下文章

JS:事件委托

js事件流之事件冒泡的应用----事件委托

事件流,冒泡,捕获,事件委托

JS116-JavaScript事件流和事件委托

JS之捕获冒泡和事件委托

JS DOM基础 事件概述 事件流 事件处理方法 添加监听器 事件类型 事件对象 事件委托