首页 > 代码库 > JavaScript 事件托付 以及jQuery对事件托付的支持
JavaScript 事件托付 以及jQuery对事件托付的支持
在我的另外一篇文章 解析Javascript事件冒泡机制里的最后,从冒泡机制的角度谈了一点对Javascript 事件托付的理解。如今单独把事件托付 拿出来和大家探讨一下。
什么是托付?
所谓的托付,现实意义上讲是指将自己的事务嘱托他人代为处理。比方说甲托付乙去做某些事儿,那么,甲则是托付人,乙是被托付人。
真正做事情的是乙,即被托付人,而托付人甲 则是把对应的信息传递给被托付人乙。自己本该做的事情交给了乙来做。例如以下图这个样例:
那么在我们javascript 里,什么是事件托付呢?
事件托付
事件托付 同意我们不必为某些特定的节点加入事件监听器,而是将事件监听器加入到(这些节点的)某个 parent节点上。事件监听器分析冒泡事件,去找到匹配的子节点元素,然后做出对应的事件响应。
事件托付详细是怎么工作的呢? 我们从以下的简单的样例開始。给大家展示事件托付的工作原理。
先看以下一段代码:
<div id="box1" class="box1"> <p id="para1">Paragraph 1</p> <p id="para2">Paragraph 2</p> <p id="para3">Paragraph 3</p> <p id="para4">Paragraph 4</p> <p id="para5">Paragraph 5</p> </div>我如今想每点击一次div1 下的 p 元素时,弹出 "paraX is clicked." 的提示框,为此。我们一般的做法就是给每个p元素添加 对应的事件监听:
<script type="text/javascript"> window.onload = function() { //加入事件监听 document.getElementById("para1").addEventListener("click",eventPerformed); document.getElementById("para2").addEventListener("click",eventPerformed); document.getElementById("para3").addEventListener("click",eventPerformed); document.getElementById("para4").addEventListener("click",eventPerformed); document.getElementById("para5").addEventListener("click",eventPerformed); } //事件对应函数 function eventPerformed(event){ alert(event.target.id+" is clicked."); } </script>是的,上述的代码全然能够实现上的功能。
我们思考这个问题,假设这个div1 下有非常多个 p元素,我们总不能每个都写上形如document.getElementById("paraX").addEventListener("click",eventPerformed);的代码片段吧,这种话就太机械了!另外。假设在实际的应用中。非常有可能同过js在 div1下动态生成p 元素。这时候,我们对应地还要加入事件处理函数,像这种动态加入的动作非常有可能分散在我们 应用的非常多个角落,这样动态加入处理函数将是一个非常蛋疼的事儿!
解决方法: 利用 事件冒泡传递的机制。将本来本元素要完毕的事件处理逻辑,托付给 父类节点,父类节点依据触发事件的节点信息,运行相应的事件处理逻辑。
<script type="text/javascript"> window.onload = function() { //加入事件监听 document.getElementById("box1").addEventListener("click",eventPerformed); } //事件对应函数 function eventPerformed(event){ if(event.target.nodeName == ‘P‘) { alert(event.target.id+" is clicked."); } } </script>通过上述的代码。就能够轻松搞定P 元素的事件处理函数绑定了,动态加入元素的时候,不须要再手动地绑定处理函数了。
能够看出,使用事件托付,能够简化了事件的处理逻辑,避免了多余的事件处理函数,进而节约了一定的内存。
可是,事件托付也是有缺点的: 假设如今的dom 元素分为非常多非常多层,对于底层事件的托付,有可能在事件冒泡的过程中。中途被某个节点 终止冒泡了,这样事件就传递不到上层,则托付就会失败了。
jquery 对事件托付的支持
在jQuery里对事件托付的支持,有下面几个函数:
当中。live() 和die()、delegate()和undelegate() 是成对出现的,各自是绑定和解绑的过程。
delegate(selector,[type],[data],fn)
jquery 的delegate 方法是典型的为事件托付准备的。
看一下对应的定义:
delegate(selector,[type],[data],fn)
selector:选择器字符串,用于过滤器触发事件的元素。
type: 附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data: 传递到函数的额外数据
fn: 当事件发生时执行的函数
概述:指定的元素(属于被选元素的子元素)加入一个或多个事件处理程序,并规定当这些事件发生时执行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比方由脚本创建的新元素)。
比如,我们将上面的样例用jquery实现:
<script type="text/javascript"> $(function() { //让box1 处理来自 子元素P的click事件托付 $("#box1").delegate("p", "click", function(event) { alert(event.target.id + " is clicked."); }); }) </script>
上述的代码实现了对box1 的子元素P 的click事件的托付处理。假设我们在js中动态地给box1 添加子元素P,对应的处理函数也会对其有效。
undelegate([selector,[type],fn])
相应地,假设想取消相应的事件托付,能够使用下面代码:
$("#box1").undelegate("p","click");delegate的使用方式是对某个元素的子元素进行事件托付处理,即形如:$("parentElement").delegate("siblings","eventType",function); parentElement元素作为一个冒泡事件处理的被托付者。
jQuery还有第二种方式:将元素的事件处理托付给DOM根节点来处理。这样的方式是live()方式:
live(type, [data], fn)
type : 事件类型
data :附加的额外数据
fn : 对应的处理函数
描写叙述:jQuery 给全部匹配的元素附加一个事件处理函数,即使这个元素是以后再加入进来的也有效。
备注: 自jQuery1.9后 就废除这个函数,仅仅能在jQuery1.9曾经的版本号中使用。
将上述的功能用此方法实现:
<script type="text/javascript"> $(function() { $("p").live("click",function(event) { alert(event.target.id + " is clicked."); }); }) </script>
die(type, [fn])
备注: 自jQuery1.9后 就废除这个函数,仅仅能在jQuery1.9曾经的版本号中使用。
从元素中删除先前用.live()绑定的全部事件.(此方法与live正好全然相反。)假设不带參数。则全部绑定的live事件都会被移除。
与live() 相相应。取消绑定,则用下列代码:
$("p").die();
在事件绑定上,jQuery 提供了一种更通用的函数:
on(events,[selector],[data],fn)
參数:
events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。假设选择的< null或省略。当它到达选定的元素。事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时运行的函数。 false 值也能够做一个函数的简写,返回false。
将上述的功能改用on函数实现:
<script type="text/javascript"> $(function() { $("#box1").on("click","p",function(event) { alert(event.target.id + " is clicked."); }); }) </script>
off(events,[selector],[fn])
在选择元素上移除一个或多个事件的事件处理函数。
off() 方法移除用.on()绑定的事件处理程序。
移除上面on 绑定的托付:
$("#box1").off("click","p");
在网上看到了关于 事件托付的总结,感觉挺不错的,就翻译一下贴在这里。跟大家分享一下,如有错误或纰漏,请指出。
点击我查看原文。
总结:
先决条件是要有一个容器,同意通用的事件处理函数。
算法:
- 将事件处理函数绑定到容器上,
在事件处理函数内获取 event.target,
- 依据不同的event.target作对应的处理
应用场景:
- 须要为子元素用一个事件处理函数 处理同样的动作;
- 简化不同动作间的结构
长处:
- 简化了初始化的过程。降低了多余的事件处理函数,进而节省了内存。
- 简化了dom节点更新时。对应事件的更新
- Allows to use
innerHTML
without additional processing.
- 第一,要求事件在IE中必须冒泡. 大多数的事件会冒泡。可是并非全部的。
对于其它的浏览器而言。捕获阶段也会相同适用。
- 第二,理论上托付会导致浏览器额外的载入,由于在容器内的随意一个地方事件的发生,都会执行事件处理函数,所以多数情况下事件处理函数都是在空循环(没有意义的动作)。通常不是什么大不了的事儿。
JavaScript 事件托付 以及jQuery对事件托付的支持