JavaScript的自定义事件库。有吗?建议?

时间:2011-05-16 09:55:16

标签: javascript events

我正在寻找一个JavaScript库,它允许我使用我可以订阅和触发的自定义事件。我还需要事件名称/范围与消息队列中的主题类似,其中您可以订阅命名空间并获取该命名空间的所有事件。

例如,

var myCustomEventHandler = new CustomEventHandler();

myCustomEventHandler.bind('my.event', function(data) { console.log('Event 1'); });
myCustomEventHandler.bind('my.other.event', function(data) { console.log('Event 2'); });
myCustomEventHandler.bind('my.*', function(data) { console.log('Event 3'); });

myCustomEventHandler.trigger('my.event');
// Logs "Event 1" and "Event 3"

myCustomEventHandler.trigger('my.other.event');
// Logs "Event 2" and "Event 3"

myCustomEventHandler.trigger('my.something.else');
// Logs "Event 3"

我可以写一些自定义的东西,但如果有的话我更喜欢使用开源库。

干杯。

9 个答案:

答案 0 :(得分:13)

YUI 2 has something like that,我认为YUI 3也是如此,但我还没有详细了解它。 EventEmitter似乎至少涵盖了您的一些要求,而且要小得多。 microjs events上的其他一些图书馆也可能很有希望。

答案 1 :(得分:10)

结帐bean。太棒了。

答案 2 :(得分:4)

我还建议您查看js-signals

以下是他们网站的基本示例:

//custom object that dispatch a `started` signal
var myObject = {
    started : new signals.Signal()
};
function onStarted(param1, param2){
    alert(param1 + param2);
}
myObject.started.add(onStarted); //add listener
myObject.started.dispatch('foo', 'bar'); //dispatch signal passing custom parameters
myObject.started.remove(onStarted); //remove a single listener

答案 3 :(得分:1)

尝试RxJS

这暴露了Javascript中Reactive Extensions和Linq的强大功能。例如:

this.searcher = $(me._textboxSelector)
        .toObservable("keyup")
        .Select(function (_) {
            return $(me._textboxSelector).val();
        })
        .Where(function (str) {
            if (me._madeSomeHiding && str.length < me._minStringLength) {
                $(me._itemsSelector).show();
            }

这允许在列表上创建过滤器。所以你可以说如果用户键入了2个字符并停止了250毫秒,那就做点什么。

答案 4 :(得分:1)

我在一天内遇到了同样的问题所以我创建了一个超级小的图书馆来帮助我处理事件。看看吧,也许你会发现它很有用。

https://github.com/anvk/Events.js

var events = new utils.Events();

var callback1 = function() {...};
var callback2 = function(arg1, arg2) {...};

events.on('event A', callback1);
events.on('event B', callback2);

events.emit('event A');
events.emit('event B', [var1, var2]);

答案 5 :(得分:0)

尝试KeyderJS

Keyder(document.getElementById("my_element")).click(function(){
    alert("Mouse button pressed");
}, function(){
    alert("Mouse button released");
});

答案 6 :(得分:0)

有点晚,但您可能对https://github.com/asyncly/EventEmitter2

感兴趣

来自说明:

  

功能

Namespaces/Wildcards.
Times To Listen (TTL), extends the once concept with many.
Browser environment compatibility.
Demonstrates good performance in benchmarks

答案 7 :(得分:0)

jQuery事件在没有jQuery的情况下提供的所有内容的JavaScript事件库。

https://github.com/AtheistP3ace/jAwn

老问题,但这里是我放在一起供个人使用的东西,但我基本上采用了jQuery并且只为他们的事件制作了自定义构建。即使使用自定义事件构建,也会消除Sizzle以及他们强加给你的所有其他内容。

只留下特定的事件代码和缓存(事件需要)。此代码已更新,包含所有最新的3.0 jQuery更新和错误修复。这只能保证适用于jQuery 3.0支持的任何浏览器(https://jquery.com/browser-support/)。总而言之,min文件是13kb,并支持jQuery可以处理事件的所有内容。命名空间,自定义事件,直接和委派事件,传递数据,触发事件,您可以命名。

阅读文档。这很简单。只是像jQuery一样工作,而不是在jQuery对象上调用on,off,trigger等,你将元素作为第一个参数传递。

正如我之前所说,我这样做是为了个人使用所以它不是一些我不断支持和更新的项目,但我会尽量保持最新用于我自己的用途,并确保它有最新的修复。我已经在多个项目中使用它多年了,它的工作效果非常好。我最近才把它放在GitHub上以防其他人发现它有用。

答案 8 :(得分:-1)

我还建议使用KeyderJS,因为它是一个“简单而强大的JavaScript库”。 我发现它仍然非常有用。它使我的编码更容易。它还具有许多浏览器兼容性。

此外,您不必非常了解JavaScript,并且您可以成为JavaScript新手或使用它的专家。