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

Posted 2020-09-10 jzdwajue

      在我的另外一篇文章 解析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中必须冒泡. 大多数的事件会冒泡。可是并非全部的。

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

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