jQuery中的自定义事件？

我正在寻找一些关于如何在jquery中以最佳方式实现自定义事件处理的输入.我知道如何从像'click'等dom元素中挂接事件,但我正在构建一个小的javascript库/插件来处理一些预览功能.

我有一个脚本运行来更新dom元素中的一些文本来自我得到的一组规则和数据/用户输入,但现在我需要在该脚本不可能知道的其他元素中显示的相同文本.我需要的是一个好的模式,以某种方式观察这个脚本产生所需的文本.

那我该怎么做？我是否忽略了jquery中的一些内置功能来提升/处理用户事件,还是需要一些jquery插件才能做到这一点？您认为处理此问题的最佳方法/插件是什么？

1> Manuel Navar..：

---

接受的答案中提供的链接显示了使用jQuery 实现pub/sub系统的一种很好的方法,但是我发现代码有点难以阅读,所以这里是我的代码的简化版本:

http://jsfiddle.net/tFw89/5/

$(document).on('testEvent', function(e, eventInfo) { 
  subscribers = $('.subscribers-testEvent');
  subscribers.trigger('testEventHandler', [eventInfo]);
});

$('#myButton').on('click', function() {
  $(document).trigger('testEvent', [1011]);
});

$('#notifier1').on('testEventHandler', function(e, eventInfo) { 
  alert('(notifier1)The value of eventInfo is: ' + eventInfo);
});

$('#notifier2').on('testEventHandler', function(e, eventInfo) { 
  alert('(notifier2)The value of eventInfo is: ' + eventInfo);
});

---

我真的很喜欢这个答案.任何人都可以在trigger()bind()(和on())上阅读文档,但是这个答案提供了一个使用jquery创建事件总线(pub/sub系统)的具体示例.

---

有没有#notifier虚拟元素的方法吗？如果我有一个JavaScript库，并希望有一个对象公开事件，则不能确定页面上存在哪些元素。

2> Vitor Silva..：

---

看看这个:

_{(转载自已过期的博客页面http://jamiethompson.co.uk/web/2008/06/17/publish-subscribe-with-jquery/,基于http://web.archive.org/web上的存档版本/20130120010146/http://jamiethompson.co.uk/web/2008/06/17/publish-subscribe-with-jquery/)}

---

使用jQuery发布/订阅

2008年6月17日

为了编写与Google Gears的离线功能集成的jQuery UI,我一直在使用一些代码来使用jQuery轮询网络连接状态.

网络检测对象

基本前提很简单.我们创建一个网络检测对象的实例,它将定期轮询URL.如果这些HTTP请求失败,我们可以假设网络连接已丢失,或者服务器在当前时间无法访问.

$.networkDetection = function(url,interval){
    var url = url;
    var interval = interval;
    online = false;
    this.StartPolling = function(){
        this.StopPolling();
        this.timer = setInterval(poll, interval);
    };
    this.StopPolling = function(){
        clearInterval(this.timer);
    };
    this.setPollInterval= function(i) {
        interval = i;
    };
    this.getOnlineStatus = function(){
        return online;
    };
    function poll() {
        $.ajax({
            type: "POST",
            url: url,
            dataType: "text",
            error: function(){
                online = false;
                $(document).trigger('status.networkDetection',[false]);
            },
            success: function(){
                online = true;
                $(document).trigger('status.networkDetection',[true]);
            }
        });
    };
};

您可以在此处查看演示.将您的浏览器设置为脱机工作,看看会发生什么...... 不,这不是很令人兴奋.

触发和绑定

令人兴奋的是(或者至少令我兴奋的是)通过应用程序中继状态的方法.我偶然发现了一个使用jQuery的触发器和绑定方法实现pub/sub系统的未讨论的方法.

演示代码比它需要的更加迟钝.网络检测对象将"状态"事件发布到主动监听它们的文档,然后向所有订户发布"通知"事件(稍后将详细介绍).这背后的原因是,在现实世界的应用程序中,可能会有更多的逻辑控制"通知"事件的发布时间和方式.

$(document).bind("status.networkDetection", function(e, status){
    // subscribers can be namespaced with multiple classes
    subscribers = $('.subscriber.networkDetection');
    // publish notify.networkDetection even to subscribers
    subscribers.trigger("notify.networkDetection", [status])
    /*
    other logic based on network connectivity could go here
    use google gears offline storage etc
    maybe trigger some other events
    */
});

由于jQuery的DOM中心方法事件被发布到(触发)DOM元素.这可以是一般事件的窗口或文档对象,也可以使用选择器生成jQuery对象.我在演示中采用的方法是创建一种几乎命名空间的方法来定义订阅者.

将成为订户的DOM元素简单地归类为"subscriber"和"networkDetection".然后,我们可以通过触发通知事件将事件仅发布到这些元素(演示中只有一个元素)$(“.subscriber.networkDetection”)

然后#notifier,作为.subscriber.networkDetection订阅者组的一部分的div 具有绑定到它的匿名函数,实际上充当监听器.

$('#notifier').bind("notify.networkDetection",function(e, online){
    // the following simply demonstrates
    notifier = $(this);
    if(online){
        if (!notifier.hasClass("online")){
            $(this)
                .addClass("online")
                .removeClass("offline")
                .text("ONLINE");
        }
    }else{
        if (!notifier.hasClass("offline")){
            $(this)
                .addClass("offline")
                .removeClass("online")
                .text("OFFLINE");
        }
    };
});

所以,你去吧.这一切都非常冗长,我的例子并不令人兴奋.它也没有展示你可以用这些方法做的任何有趣的事情,但是如果有人有兴趣挖掘源头感觉自由.所有代码都内嵌在演示页面的头部

---

这是某个地方的引用吗？如果是,请引用您的来源,并提供一个链接,如果它仍然存在.

3> Tuxified..：

---

我想是这样的......它可以'绑定'自定义事件,例如(来自:http://docs.jquery.com/Events/bind#typedatafn):

 $("p").bind("myCustomEvent", function(e, myName, myValue){
      $(this).text(myName + ", hi there!");
      $("span").stop().css("opacity", 1)
               .text("myName = " + myName)
               .fadeIn(30).fadeOut(1000);
    });
    $("button").click(function () {
      $("p").trigger("myCustomEvent", [ "John" ]);
    });

---

这段代码做到了这一点,不是吗？引发`myCustomEvent`,顶部的bind添加一个监听器.

4> Chris Moschi..：

---

我有一个类似的问题,但实际上是在寻找一个不同的答案; 我正在寻找创建自定义事件.例如,而不是总是这样说:

$('#myInput').keydown(function(ev) {
    if (ev.which == 13) {
        ev.preventDefault();
        // Do some stuff that handles the enter key
    }
});

我想将其缩写为:

$('#myInput').enterKey(function() {
    // Do some stuff that handles the enter key
});

触发器和绑定不会告诉整个故事 - 这是一个JQuery插件. http://docs.jquery.com/Plugins/Authoring

"enterKey"函数作为属性附加到jQuery.fn - 这是所需的代码:

(function($){
    $('body').on('keydown', 'input', function(ev) {
        if (ev.which == 13) {
            var enterEv = $.extend({}, ev, { type: 'enterKey' });
            return $(ev.target).trigger(enterEv);
        }
    });

    $.fn.enterKey = function(selector, data, fn) {
        return this.on('enterKey', selector, data, fn);
    };
})(jQuery);

http://jsfiddle.net/b9chris/CkvuJ/4/

如上所述,您可以在链接侦听器上优雅地处理键盘输入,例如:

$('a.button').on('click enterKey', function(ev) {
    ev.preventDefault();
    ...
});

编辑:更新以正确传递正确的this上下文到处理程序,并将任何返回值从处理程序返回到jQuery(例如,如果您要取消事件和冒泡).更新为将正确的jQuery事件对象传递给处理程序,包括键代码和取消事件的能力.

老jsfiddle:http://jsfiddle.net/b9chris/VwEb9/24/

5> Salvador Dal..：

---

这是一个旧帖子,但我会尝试用新信息更新它.

要使用自定义事件,您需要将其绑定到某个DOM元素并触发它.所以你需要使用

.on()方法将事件类型和事件处理函数作为参数.可选地,它还可以接收与事件相关的数据作为其第二个参数,将事件处理函数推送到第三个参数.传递的任何数据都可用于事件对象的data属性中的事件处理函数.事件处理函数始终接收事件对象作为其第一个参数.

和

.trigger()方法将事件类型作为其参数.或者,它也可以采用一组值.这些值将作为事件对象之后的参数传递给事件处理函数.

代码如下所示:

$(document).on("getMsg", {
    msg: "Hello to everyone",
    time: new Date()
}, function(e, param) {
    console.log( e.data.msg );
    console.log( e.data.time );
    console.log( param );
});

$( document ).trigger("getMsg", [ "Hello guys"] );

在这里和这里可以找到很好的解释.为什么这有用呢？我在twitter工程师的这个出色的解释中找到了如何使用它.

PS在普通的javascript中,您可以使用新的CustomEvent执行此操作,但要注意IE和Safari问题.