Javascript 触发器()多个事件
我正在编写一个jQuery插件,并使用Javascript 触发器()多个事件,javascript,jquery,triggers,Javascript,Jquery,Triggers,我正在编写一个jQuery插件,并使用.on和.trigger作为我的发布/订阅系统。但是,我想在不同的场景中触发多个事件 这是否可以像方法上的.on那样作为一个字符串 目标: 当前解决方案: $this .trigger("success") .trigger("next") .trigger("etc"); // works, triggers all three events 有什么建议吗?你的建议很好。。。不能使用逗号分隔的列表
.on
和.trigger
作为我的发布/订阅系统。但是,我想在不同的场景中触发多个事件
这是否可以像方法上的.on那样作为一个字符串
目标:
当前解决方案:
$this
.trigger("success")
.trigger("next")
.trigger("etc"); // works, triggers all three events
有什么建议吗?你的建议很好。。。不能使用逗号分隔的列表触发多个事件。trigger()构造函数只接受一个事件名称和可选的附加参数来传递给事件处理程序
另一种选择是触发附加到元素的所有事件,但是,如果您需要在不同的senarios中触发特定事件,这可能无法满足您的需要:
$.each($this.data('events'), function(k, v) {
$this.trigger(k);
});
为了防止以后有人偶然发现这个问题,我通过创建一个自定义jQuery函数解决了这个问题
$.fn.triggerMultiple = function(list){
return this.each(function(){
var $this = $(this); // cache target
$.each(list.split(" "), function(k, v){ // split string and loop through params
$this.trigger(v); // trigger each passed param
});
});
};
$this.triggerMultiple("success next etc"); // triggers each event
JQuery本身不支持触发多个事件,但是您可以编写自定义扩展方法triggerAll
(function($) {
$.fn.extend({
triggerAll: function (events, params) {
var el = this, i, evts = events.split(' ');
for (i = 0; i < evts.length; i += 1) {
el.trigger(evts[i], params);
}
return el;
}
});
})(jQuery);
您可以扩展原始的方法原型:
(函数($){
常量触发器=$.fn.trigger;
$.fn.trigger=函数(evtNames,数据){
evtNames=evtNames.trim();
如果(//测试(EVT名称)){
evtNames.split(+/).forEach(n=>_trigger.call(this,n,data));
归还这个;
}
return _trigger.apply(这是参数);
};
}(jQuery));
$(“正文”)。在({
foo(e,data){console.log(e,data);},
bar(e,data){console.log(e,data);},
baz(e,data){console.log(e,data);},
});
$(“body”)。关闭(“bar”);//测试:停止侦听“bar”EventName
$(“body”).trigger(“foobarbaz”,[{data:“lorem”}]);//富,巴兹
哈哈,我刚刚写了类似的东西!很高兴看到其他人得出了同样的结论。谢谢您可以在$this.trigger(k)的开头添加~['succes','next','etc'].indexOf(k)&&
过滤所需事件。使用for循环而不是each循环是否有好处?我认为对于这种简单的情况,使用正则for in循环而不是自定义jQuery$更有效。each
对您传递的参数进行了许多假设。最后是内部。请注意,triggerAll
的右括号后面的分号不应该在那里。@ZachWolf for loops的性能比$高很多。each()
甚至Array.forEach()
,因为它节省了每次迭代时相当大的函数调用开销。您没有传播参数。
(function($) {
$.fn.extend({
triggerAll: function (events, params) {
var el = this, i, evts = events.split(' ');
for (i = 0; i < evts.length; i += 1) {
el.trigger(evts[i], params);
}
return el;
}
});
})(jQuery);
$this.triggerAll("success next etc");