mootools_MooTools,Dojo和jQuery的事件委托

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中事件委托的来龙去脉,但是大多数开发人员都使用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 MoreElement.Delegation类允许开发人员在其应用程序中进行用户事件委托。 语法非常类似于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使用智能命名的委托方法进行事件委托:


$("#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

mootools

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值