JavaScript 的自定义事件库。有吗?推荐?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6015680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 19:09:45  来源:igfitidea点击:

Custom event library for JavaScript. Are there any? Recommendations?

javascriptevents

提问by Stephen Melrose

I'm looking for a JavaScript library that will allow me to use custom events that I can subscribe to and fire. I also need the event name/scope to work similarly to that of topics in a message queue, where you can subscribe to a namespace and get all events for that namespace.

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

For example,

例如,

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"

I could write something custom, but I'd prefer to use an open source library if there is one.

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

Cheers.

干杯。

采纳答案by Quentin

YUI 2 has something like that, I assume YUI 3 does too, but I haven't looked at it in enough detail to know yet. EventEmitterappears to cover at least some of your requirements, and is much smaller. Some of the other libraries on microjs eventsmay be promising too.

YUI 2 有类似的东西,我认为 YUI 3 也有,但我还没有详细了解它。EventEmitter似乎至少满足了您的一些要求,而且要小得多。其他一些关于microjs 事件的库也可能很有前途。

回答by Johnny

Check out bean. It's awesome.

检查。这很棒。

回答by ruyadorno

I would also recommend taking a look at js-signals

我还建议您查看js-signals

Here is a basic example from their site:

这是他们网站上的一个基本示例:

//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

回答by AtheistP3ace

A JavaScript event library for everything jQuery events offers without the jQuery.

一个 JavaScript 事件库,用于 jQuery 事件提供的所有内容,无需 jQuery。

https://github.com/AtheistP3ace/jAwn

https://github.com/AtheistP3ace/jAwn

Old question but here is something I put together for personal use but I basically took jQuery and made a custom build of only their events stuff. Stripped out Sizzle and everything else they force on you even with a custom event build.

老问题,但这是我放在一起供个人使用的东西,但我基本上采用了 jQuery 并仅对他们的事件内容进行了自定义构建。即使使用自定义事件构建,也去掉了 Sizzle 和他们强加给您的所有其他内容。

That leaves you with only the specific event code and the caching (which is needed for events). This code has been updated with all the latest 3.0 jQuery updates and bug fixes. This can only be guaranteed to work with whatever browsers jQuery 3.0 supports (https://jquery.com/browser-support/). All in all the min file is 13kb and supports everything jQuery can do with events. Namespaces, custom events, direct and delegated events, passing data, triggering events, you name it.

这让您只剩下特定的事件代码和缓存(事件需要缓存)。此代码已更新为所有最新的 3.0 jQuery 更新和错误修复。这只能保证适用于 jQuery 3.0 支持的任何浏览器(https://jquery.com/browser-support/)。总而言之,最小文件是 13kb 并且支持 jQuery 可以对事件执行的所有操作。命名空间、自定义事件、直接和委托事件、传递数据、触发事件,您可以命名。

Read the docs. It's pretty simple. Works just like jQuery only instead of calling on, off, trigger and the such on a jQuery object you pass the element(s) as the first argument.

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

As I said before I did this for personal use so its not some project I constantly support and update but I try to keep it up to date for my own uses and make sure it has the latest fixes. I have been using it for years in multiple projects and its worked great. I only recently put it on GitHub in case others found it useful.

正如我之前所说,我这样做是为了个人使用,所以它不是我不断支持和更新的某个项目,但我会尽量使其保持最新状态以供我自己使用,并确保它具有最新的修复程序。我多年来一直在多个项目中使用它,并且效果很好。我最近才把它放在 GitHub 上,以防其他人发现它有用。

回答by anvk

I had the same problem back in a day so I created a super tiny library to help me with events. Check it out, maybe you will find it useful.

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

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

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]);

回答by Aliostad

Try RxJS.

试试RxJS

This exposes power of Reactive Extensions and Linq in the Javascript. Example:

这在 Javascript 中暴露了响应式扩展和 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();
            }

This allows creating a filter on a list. So you can say if user typed 2 characters and stopped for 250ms then do something.

这允许在列表上创建过滤器。所以你可以说如果用户输入了 2 个字符并停止了 250 毫秒然后做一些事情。

回答by Jacques Marais

Try KeyderJS:

尝试KeyderJS

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

回答by Doua Beri

A little late but you might be interested in https://github.com/asyncly/EventEmitter2

有点晚了,但你可能对https://github.com/asyncly/EventEmitter2感兴趣

From the description:

从描述来看:

FEATURES

特征

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

回答by 123

I would also suggest KeyderJS as it is a "Simple yet powerful JavaScript library". I found and still find it very useful. It makes my coding easier.It also has many browser compatibility.

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

Also you don't have to know JavaScript very good to use it, and you can be a JavaScript newbie or expert to use it.

此外,您不必非常了解 JavaScript 即可使用它,您可以是 JavaScript 新手或专家来使用它。