blocks|key|1561252|text|如果您需要触发自定义事件(如您所定义的)，则应该调用.trigger()方法(只要您觉得应该触发该事件)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1561253|$(o).trigger('my-awesome-event');|code-block|syntax|javascript|1561254|然后使用.bind()或(如果使用jQuery+1.7%2B)+.on()定义一个或多个监听器|1561255|$(o).on('my-awesome-event',+function(event){+...+});|1561256|entityMap^0|Q|A|0|0|4|7|U|5|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<p>If you need to trigger a <em>custom</em> event (as in defined by you), you should call the <code>.trigger()</code> method (whenever you feel that event should be triggered):</p>

<pre><code>$(o).trigger('my-awesome-event');
</code></pre>

<p>Then you define one or more listeners, using either <code>.bind()</code> or (if you're using jQuery 1.7+) <code>.on()</code>:</p>

<pre><code>$(o).on('my-awesome-event', function(event){ ... });
</code></pre>


blocks|key|618068|text|在jQuery中，您可以添加任意数量的处理程序：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|618069|$(o).on('show',+function()+{+...+});|code-block|syntax|javascript|618070|后续调用不会删除先前绑定的处理程序。|618071|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>In jQuery you can add as many handlers as you like:</p>

<pre><code>$(o).on('show', function() { ... });
</code></pre>

<p>Subsequent calls won't remove previously-bound handlers.</p>


blocks|key|618034|text|您可以使用jQuery的bind方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|618035|$(+o+).bind(+"show",+function()+{}+);|code-block|syntax|javascript|618036|这会将事件处理程序添加到事件处理程序列表中，而不会覆盖现有的处理程序。Here+are+the+docs|offset|length|618037|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/bind/^0|0|0|Z|H|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>You can use jQuery's bind method:</p>

<pre><code>$( o ).bind( "show", function() {} );
</code></pre>

<p>This adds an event handler to a list of event handlers, doesn't overwrite existing handlers. <a href="http://api.jquery.com/bind/" rel="nofollow">Here are the docs</a></p>


blocks|key|1561245|text|只要事件处理程序不停止传播事件，通过jQuery附加事件处理程序就不会与任何其他事件冲突。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1561246|如果您更愿意在原生JavaScript中完成此操作，则需要使用字符串连接：|1561247|o.onShow+=+o.onShow+%2B+"function()+{+//+something+};"|code-block|syntax|javascript|1561248|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Attaching an event handler via jQuery will not conflict with any other events, so long as the event handler does not stop the event from propagating.</p>

<p>If you'd rather accomplish this in native JavaScript, you need to use string concatenation:</p>

<pre><code>o.onShow = o.onShow + "function() { // something };"
</code></pre>


blocks|key|540685|text|如果你想用vanilla+js来做这件事，那就稍微有点麻烦了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|540686|​|540687|const+justLog+=+x+=>+()+=>+console.log(x)
const+test+=+justLog('test+called')
const+testTwo+=+justLog('testTwo+called')

document.querySelector('button').onclick+=+testTwo;|code-block|syntax|javascript|540688|<button+onclick="test">Test</button>|540689|540690|当然，这样做的问题是，这只是改变了监听器，而不是附加它。|540691|但是，我们可以在代码中添加一个新的侦听器，只需稍微修改一下：|540692|540693|const+justLog+=+x+=>+()+=>+console.log(x)
const+test+=+justLog('test+called')
const+testTwo+=+justLog('testTwo+called')

const+appendOnClick+=+element+=>
++newFunction+=>+{
++++const+original+=+element.onclick;
++++element.onclick+=+(e)+=>+{
++++++original(e)
++++++newFunction(e)
++++};
++};
++
const+button+=+document.querySelector('button')
const+appendNewFunction+=+appendOnClick(button)

appendNewFunction(testTwo)

const+testThree+=+justLog('testThree+called')

appendNewFunction(testThree)
appendNewFunction(test)|540694|<button+onclick="test()">Test</button>|540695|540696|通过这种方式，我们可以将多个函数附加到一个元素中，而不会覆盖以前存在的函数。|540697|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@]|A|$]]|$1|P|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|U|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1A|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Y|$]]

<p>If you're looking to do this with vanilla js, it's slightly more tricky.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const justLog = x =&gt; () =&gt; console.log(x)
const test = justLog('test called')
const testTwo = justLog('testTwo called')

document.querySelector('button').onclick = testTwo;</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="test"&gt;Test&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>The problem with this of course is that this simply changes the listener, and doesn't append it.</p>

<p>We can, however, append a new listener with a slight alteration to the code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const justLog = x =&gt; () =&gt; console.log(x)
const test = justLog('test called')
const testTwo = justLog('testTwo called')

const appendOnClick = element =&gt;
  newFunction =&gt; {
    const original = element.onclick;
    element.onclick = (e) =&gt; {
      original(e)
      newFunction(e)
    };
  };
  
const button = document.querySelector('button')
const appendNewFunction = appendOnClick(button)

appendNewFunction(testTwo)

const testThree = justLog('testThree called')

appendNewFunction(testThree)
appendNewFunction(test)</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="test()"&gt;Test&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>In this way, we're able to append multiple functions to an element without overriding the functions which were previously in place.</p>


<p>I have my own object with <code>onShow()</code> function, which is called (by me) when object is shown. I can override this function by assignment</p>

<pre><code>o.onShow = function() { // something };
</code></pre>

<p>But it removes previous version of a function. So, if I wish to conserve existing handler, I should cache it and call in new handler:</p>

<pre><code>o.oldOnShow = o.onShow;
o.onShow = function() { this.oldOnShow(); // something };
</code></pre>

<p>But this way I can cache only one previous handler. What if there are many of them?</p>

<p>Is there a convenient way to accomplish this task? How this task is named in literature? Is there a methods for this in jQuery?</p>


How to add additional event handler in jQuery or plain javascript?

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

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

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

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

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我有我自己的带有onShow()函数的对象，当object显示时(由我)调用它。我可以通过赋值重写这个函数。o.onShow = function() { // something };但它删除了函数的以前版本。因此，如果我希望保存现有的处理程序，我应该缓存它并调用新的处理程序：o.oldOnShow = o.onShow;o.onShow = function() { this.oldOnSho

问如何在jQuery或纯javascript中添加额外的事件处理程序？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jQuery或纯javascript中添加额外的事件处理程序？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jQuery或纯javascript中添加额外的事件处理程序？
EN