mootools_MooTools，Dojo和jQuery的事件委托

妖狐艹你老母 2023-02-21 16:21 266阅读 0赞

mootools

I've covered the ins and outs of [event delegation][] within JavaScript a few weeks ago but most developers utilize JavaScript frameworks so I thought I'd take a few moments to show you how to implement this wonderful event strategy with the MooTools, Dojo, and jQuery JavaScript frameworks.

几周前，我已经介绍了JavaScript中[事件委托的][event delegation]来龙去脉，但是大多数开发人员都使用JavaScript框架，所以我想花一些时间向您展示如何使用MooTools，Dojo和Java实现这种出色的事件策略。 jQuery JavaScript框架。

## MooTools JavaScript **(**The MooTools JavaScript**)** ##

The [Element.Delegation class with MooTools More][] allows for developers to user event delegation within their application.  The syntax looks very much like MooTools' Event class' addEvent method with the exception that the :relay pseudo allows you to provide an argument which represents the elements which should answer to delegation:

[MooTools More][Element.Delegation class with MooTools More]的[Element.Delegation类][Element.Delegation class with MooTools More]允许开发人员在其应用程序中进行用户事件委托。 语法非常类似于MooTools的Event类的addEvent方法，不同之处在于：：relay伪指令允许您提供一个参数，该参数表示应响应委托的元素：

// link-list is the parent, a is the child elements
    document.id("link-list").addEvent("click:relay(a)", function(event,node){
    	console.log("you clicked a link!",node);
    });

The MooTools team used addEvent with the custom relay method to make adding event delegation to nodes very much like native event assignment.  I hope you like it!

MooTools团队将addEvent与自定义中继方法结合使用，非常类似于本机事件分配，从而向节点添加事件委托。 我希望你喜欢它！

## jQuery JavaScript **(**The jQuery JavaScript**)** ##

jQuery uses the intelligently named [delegate method][] for event delegation:

jQuery使用智能命名的[委托方法][delegate method]进行事件委托：

$("#link-list").delegate("a", "click", function(){
    	// "$(this)" is the node that was clicked
    	console.log("you clicked a link!",$(this));
    });

The delegate method accepts three arguments:  the selector to be matched, the event to be responded to, and the callback with which to run for the given node.

委托方法接受三个参数：要匹配的选择器，要响应的事件以及为给定节点运行的回调。

## Dojo JavaScript **(**The Dojo JavaScript**)** ##

The Dojo Toolkit's event delegation capabilities live within the dojox.NodeList.delegate resource.  Much like jQuery, Dojo uses the delegate method for event delegation:

Dojo Toolkit的事件委托功能位于dojox.NodeList.delegate资源中。 与jQuery一样，Dojo使用委托方法进行事件委托：

// Require the resource
    dojo.require("dojox.NodeList.delegate");
    
    // *Sigh* When the DOM is ready...
    dojo.ready(function() {
    	// Assign an event
    	dojo.query("#link-list").delegate("a","onclick",function(event) {
    		// "this.node" is the node that was clicked
    		console.log("you clicked a link!",this);
    	});
    });

The delegate method accepts the same arguments as jQuery:  selector, event type, and callback.

委托方法接受与jQuery相同的参数：选择器，事件类型和回调。

Event delegation is especially useful for applications which dynamically create and remove DOM nodes.  Imagine the nightmare in having to assign events frequently (to new nodes) and remove events from deleted nodes (to prevent IE memory leaks).  Take full advantage of the delegation capabilities of each framework -- they'll come in use quickly!

事件委托对于动态创建和删除DOM节点的应用程序特别有用。 想象一下，梦frequently以求的是必须频繁地(向新节点)分配事件并从已删除的节点中删除事件(以防止IE内存泄漏)。 充分利用每个框架的委派功能-它们将很快投入使用！

> 翻译自: [https://davidwalsh.name/delegate-event][https_davidwalsh.name_delegate-event]

mootools

[event delegation]: https://davidwalsh.name/event-delegate
[Element.Delegation class with MooTools More]: http://mootools.net/docs/more/Element/Element.Delegation
[delegate method]: http://api.jquery.com/delegate/
[https_davidwalsh.name_delegate-event]: https://davidwalsh.name/delegate-event