首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jQuery中的自定义事件?

jQuery中的自定义事件?
EN

Stack Overflow用户
提问于 2008-12-30 09:32:35
回答 2查看 149.6K关注 0票数 186

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

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

那么我该怎么做呢?我是不是忽略了jquery中一些用来引发/处理用户事件的内置功能,或者我需要一些jquery插件来做这件事?你认为处理这个问题的最好的方式/插件是什么?

EN

回答 2

Stack Overflow用户

发布于 2008-12-30 09:41:53

我想是的..。可以‘绑定’自定义事件,比如(来自:http://docs.jquery.com/Events/bind#typedatafn):

代码语言:javascript
复制
 $("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" ]);
    });
票数 21
EN

Stack Overflow用户

发布于 2011-04-17 03:49:44

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

代码语言:javascript
复制
$('#myInput').keydown(function(ev) {
    if (ev.which == 13) {
        ev.preventDefault();
        // Do some stuff that handles the enter key
    }
});

我想将其缩写为:

代码语言:javascript
复制
$('#myInput').enterKey(function() {
    // Do some stuff that handles the enter key
});

触发器和绑定并不能说明全部--这是一个JQuery插件。http://docs.jquery.com/Plugins/Authoring

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

代码语言:javascript
复制
(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/

上面的精妙之处在于,您可以在链接侦听器上优雅地处理键盘输入,如下所示:

代码语言:javascript
复制
$('a.button').on('click enterKey', function(ev) {
    ev.preventDefault();
    ...
});

编辑:更新以正确地将正确的this上下文传递给处理程序,并将处理程序返回的任何返回值返回给jQuery (例如,在您希望取消事件和冒泡的情况下)。更新以将适当的jQuery事件对象传递给处理程序,包括关键代码和取消事件的能力。

旧的jsfiddle:http://jsfiddle.net/b9chris/VwEb9/24/

票数 15
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/399867

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档