blocks|key|1447000|text|我想是的..。可以‘绑定’自定义事件，比如(来自：http://docs.jquery.com/Events/bind#typedatafn)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1447001|+$("p").bind("myCustomEvent",+function(e,+myName,+myValue){
++++++$(this).text(myName+%2B+",+hi+there!");
++++++$("span").stop().css("opacity",+1)
+++++++++++++++.text("myName+=+"+%2B+myName)
+++++++++++++++.fadeIn(30).fadeOut(1000);
++++});
++++$("button").click(function+()+{
++++++$("p").trigger("myCustomEvent",+[+"John"+]);
++++});|code-block|syntax|javascript|1447002|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Events/bind#typedatafn^0|P|19|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

I think so.. it's possible to 'bind' custom events, like(from: <a href="http://docs.jquery.com/Events/bind#typedatafn" rel="noreferrer">http://docs.jquery.com/Events/bind#typedatafn</a>):

<pre><code> $("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" ]);
 });
</code></pre>

blocks|key|1661832|text|我有一个类似的问题，但实际上正在寻找一个不同的答案；我希望创建一个自定义事件。例如，不是总是这样说：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1661833|$('#myInput').keydown(function(ev)+{
++++if+(ev.which+==+13)+{
++++++++ev.preventDefault();
++++++++//+Do+some+stuff+that+handles+the+enter+key
++++}
});|code-block|syntax|javascript|1661834|我想将其缩写为：|1661835|$('#myInput').enterKey(function()+{
++++//+Do+some+stuff+that+handles+the+enter+key
});|1661836|触发器和绑定并不能说明全部--这是一个JQuery插件。http://docs.jquery.com/Plugins/Authoring|offset|length|1661837|"enterKey“函数作为属性附加到jQuery.fn+--这是所需的代码：|1661838|(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);|1661839|http://jsfiddle.net/b9chris/CkvuJ/4/|1661840|上面的精妙之处在于，您可以在链接侦听器上优雅地处理键盘输入，如下所示：|1661841|$('a.button').on('click+enterKey',+function(ev)+{
++++ev.preventDefault();
++++...
});|1661842|编辑:更新以正确地将正确的this上下文传递给处理程序，并将处理程序返回的任何返回值返回给jQuery+(例如，在您希望取消事件和冒泡的情况下)。更新以将适当的jQuery事件对象传递给处理程序，包括关键代码和取消事件的能力。|style|CODE|1661843|旧的jsfiddle：http://jsfiddle.net/b9chris/VwEb9/24/|1661844|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Plugins/Authoring|1|2|http://jsfiddle.net/b9chris/VwEb9/24/^0|0|0|0|0|S|14|0|0|0|0|0|10|1|0|0|0|D|4|0|B|11|2|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1G|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1H|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1I|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1J|8|@]|9|@$M|1K|N|1L|1|1M]]|A|$]]|$1|O|3|P|5|6|7|1N|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1O|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1P|8|@]|9|@$M|1Q|N|1R|1|1S]]|A|$]]|$1|U|3|V|5|6|7|1T|8|@]|9|@]|A|$]]|$1|W|3|X|5|D|7|1U|8|@]|9|@]|A|$E|F]]|$1|Y|3|Z|5|6|7|1V|8|@$M|1W|N|1X|10|11]]|9|@]|A|$]]|$1|12|3|13|5|6|7|1Y|8|@]|9|@$M|1Z|N|20|1|21]]|A|$]]|$1|14|3|-4|5|6|7|22|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]|1C|$5|17|18|19|A|$1A|T]]|1D|$5|17|18|19|A|$1A|1E]]]]

I had a similar question, but was actually looking for a different answer; I'm looking to create a custom event. For example instead of always saying this:

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

I want to abbreviate it to this:

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

trigger and bind don't tell the whole story - this is a JQuery plugin.
<a href="http://docs.jquery.com/Plugins/Authoring" rel="nofollow noreferrer">http://docs.jquery.com/Plugins/Authoring</a>

The "enterKey" function gets attached as a property to jQuery.fn - this is the code required:

<pre><code>(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);
</code></pre>

<a href="http://jsfiddle.net/b9chris/CkvuJ/4/" rel="nofollow noreferrer">http://jsfiddle.net/b9chris/CkvuJ/4/</a>

A nicety of the above is you can handle keyboard input gracefully on link listeners like:

<pre><code>$('a.button').on('click enterKey', function(ev) {
 ev.preventDefault();
 ...
});
</code></pre>

Edits: Updated to properly pass the right <code>this</code> context to the handler, and to return any return value back from the handler to jQuery (for example in case you were looking to cancel the event and bubbling). Updated to pass a proper jQuery event object to handlers, including key code and ability to cancel event.

Old jsfiddle: <a href="http://jsfiddle.net/b9chris/VwEb9/24/" rel="nofollow noreferrer">http://jsfiddle.net/b9chris/VwEb9/24/</a>

I'm looking for some input on how to implement custom eventhandling in jquery the best way. I know how to hook up events from the dom elements like 'click' etc, but I'm building a tiny javascript library/plugin to handle some preview functionality.

I've got a script running to update some text in a dom element from a set of rules and data/user input I got, but now I need that same text shown in other elements that this script can't possibly know of. What I need is a good pattern to somehow observe this script producing the needed text.

So how do I do this? Did I overlook some builtin functionality in jquery to raise/handle user events or do I need some jquery plugin to do it? What do you think is the best way/plugin to handle this?

Custom events in jQuery?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在寻找一些关于如何在jquery中以最好的方式实现自定义eventhandling的输入。我知道如何从dom元素中连接事件，比如'click‘等，但我正在构建一个小型的javascript库/插件来处理一些预览功能。我已经运行了一个脚本来根据我获得的一组规则和数据/用户输入更新dom元素中的一些文本，但是现在我需要...

问jQuery中的自定义事件？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery中的自定义事件？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery中的自定义事件？
EN