首页 > 代码库 > 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");




在网上看到了关于 事件托付的总结,感觉挺不错的,就翻译一下贴在这里。跟大家分享一下,如有错误或纰漏,请指出。    点击我查看原文。

总结:

    先决条件是要有一个容器,同意通用的事件处理函数。


   算法:

  1. 将事件处理函数绑定到容器上,
  2. 在事件处理函数内获取 event.target,
  3. 依据不同的event.target作对应的处理

应用场景:

  • 须要为子元素用一个事件处理函数 处理同样的动作;
  • 简化不同动作间的结构

长处:

  •  简化了初始化的过程。降低了多余的事件处理函数,进而节省了内存。
  •  简化了dom节点更新时。对应事件的更新
  • Allows to use innerHTML without additional processing.
缺点:
  • 第一,要求事件在IE中必须冒泡. 大多数的事件会冒泡。可是并非全部的。

    对于其它的浏览器而言。捕获阶段也会相同适用。

  • 第二,理论上托付会导致浏览器额外的载入,由于在容器内的随意一个地方事件的发生,都会执行事件处理函数,所以多数情况下事件处理函数都是在空循环(没有意义的动作)。通常不是什么大不了的事儿。







JavaScript 事件托付 以及jQuery对事件托付的支持