JavaScript事件代理和委托的详细说明

在javasript中，代理和委托经常出现。

那么在什么情况下使用呢？它的原理是什么？

介绍了javascript委托的用法和原理，以及委托在Dojo、jQuery等框架中的接口。

JavaScript事件代理事件代理在JS世界中是一个非常有用和有趣的功能。当我们需要向许多元素添加事件时，我们可以通过向它们的父节点添加事件并将事件委托给父节点来触发处理功能。

这主要是由于浏览器的事件冒泡机制。让我们举个例子来解释如何使用这个特性。

例子主要取自David Walsh的相关文章(JavaScript事件委托是如何工作的)。

假设有一个的父节点，其中包含多个李的子节点：

ul id=' list ' Li id=' Li-1 ' Li 1/Li Li id=' Li-2 ' Li 2/Li Li id=' Li-3 ' Li 3/Li Li id=' Li-4 ' Li 4/Li Li id=' Li-5 ' Li 5/Li/ul当我们的鼠标移动到Li时。

我们通常的写作方法是给每一个Li添加一些像onMouseOver或者onClick这样的事件监控。

函数addListenersLi(lie element){ lie element . onclick=function click handler(){//TODO }；lie Element . onmouseover=function mouseOverHandler(){//TODO } } window . onload=function(){ var ulElement=document . getelementbyid(' list ')；var LieElements=uleElement . GetElementbytagname(' Li ')；for(var I=LiElements . length-1；I=0；I-){ addListenersLi(LiElements[I])；}}如果经常添加或删除这个中的Li子元素，那么我们需要在每次添加Li时调用这个addListenersLi方法，为每个Li节点添加一个事件处理程序。

这将导致添加或删除过程的复杂性和出错的可能性。

问题的解决方案是使用事件代理机制。当一个事件被抛出到更高级别的父节点时，我们通过检查事件的目标来判断和获取事件源Li。

下面的代码可以达到预期的效果：

/获取父节点并添加click事件文档. getelementbyid ('list ')。addeventlistener ('click ')，函数(e) {//检查事件源e.targe是否为Li if(e . target e . target . nodename . toupper case=' Li '){///to doconsole . log(' listitem '，e.target.id，' was click！'。);}});向父节点添加单击事件。单击子节点时，单击事件将从子节点向上冒泡。父节点捕获事件后，通过判断e.target.nodeName判断是否是我们需要处理的节点，并通过e.target得到被点击的Li节点，从而得到相应的信息并进行处理。

捕获浏览器的事件冒泡和事件冒泡机制。不同的浏览器制造商有不同的处理机制来捕获和处理事件。本文介绍了W3C为DOM2.0定义的标准事件。

DOM2.0模型将事件处理过程分为三个阶段：

1.事件捕获阶段，

二、事件目标阶段，

第三，事件的泡沫阶段。

下图：

事件捕获：当一个元素触发一个事件(比如onclick)时，顶层对象文档会发出一个事件流，这个事件流会随着DOM树的节点流向目标元素节点，直到到达事件真正发生的目标元素。在此过程中，不会触发事件对应的监控功能。

事件目标：到达目标元素后，执行目标元素事件对应的处理功能。如果没有绑定监听器函数，就不会执行。

事件冒泡：从目标元素到顶部元素。如果途中有节点绑定了相应的事件处理函数，这些函数将被触发一次。如果想防止事件冒泡，可以使用e . stopperpagation()(Firefox)或e . cancelubble=true(IE)来组织事件的冒泡传播。

jQuery和Dojo中的委托函数让我们看看如何使用Dojo和jQuery中提供的事件代理接口。

jQuery:

$('#list ')。delegate('li '，' click '，function(){/' $(this)'是单击的节点console.log('您单击了一个链接！'，$(本))；});jQuery的委托方法需要三个参数，一个选择器、一个时间名称和一个事件处理程序。

然而，Dojo与jQuery相似，只是它们的编程风格不同：

需要(['dojo/query '，' dojox/NodeList/delegate']，函数(query，delegate){ query('#list ')。delegate('li '，' onclick '，function(event) { //'this.node '是单击了console.log的节点('您单击了一个链接！'，这个)；});})Dojo在dojox中的委托模块。NodeList提供了与jQuery相同的接口和参数。

通过委托，我们可以认识到使用事件委托进行开发的几个好处：

1.管理功能较少。没有必要为每个元素添加侦听器函数。对于同一父节点下的类似子元素，事件可以由委托给父元素的监听功能来处理。

2.动态添加和修改元素很方便，不需要因为元素的变化而修改事件绑定。

3.3之间的关联较少。JavaScript和DOM节点，降低了循环引用导致内存泄漏的概率。

在JavaScript编程中使用代理上面介绍的是在处理DOM事件时，使用浏览器冒泡机制将事件代理添加到DOM元素中。事实上，在纯JS编程中，我们也可以使用这种编程模式创建代理对象来操作目标对象。

var delegate=function(client，client method){ return function(){ return client method . apply(client，arguments)；} } var Apple=function(){ var _ color=' red '；返回{ getcolor : function(){ console . log(' color : ' _ color)；}，setColor:函数(color){ _ color=color；} };};var a=新苹果()；var b=新苹果()；a . GetColor()；a.setColor('绿色')；a . GetColor()；//调用代理var d=delegate(a，a . setcolor)；d('蓝色')；//执行代理a . GetColor()；//b . GetColor()；在上例中，通过调用delegate()函数创建的委托函数d来修改A。

这样，虽然apply(也可以使用call)用于传递调用对象，但有些对象在编程模式下是隐藏的，可以保护这些对象不被随机访问和修改。

在许多框架中，委托的概念被引用来指定方法的范围。

典型的例子是道场。ExtJS的hit(作用域，方法)和createDelegate(obj，参数)。

以上就是本文的全部内容，希望对大家学习javascript编程有所帮助。