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

Question

我有自己的带有 onShow() 函数的对象，当显示对象时（由我）调用该函数。我可以通过赋值覆盖这个函数

o.onShow = function() { // something };

，但它会删除函数的先前版本。因此，如果我希望保留现有的处理程序，我应该缓存它并调用新的处理程序：

o.oldOnShow = o.onShow;
o.onShow = function() { this.oldOnShow(); // something };

但这样我只能缓存一个以前的处理程序。如果有很多怎么办？

有没有一种方便的方法来完成这项任务？这项任务在文献中是如何命名的？ jQuery 中有这样的方法吗？

Answer 1

在 jQuery 中，您可以添加任意数量的处理程序：

$(o).on('show', function() { ... });

后续调用不会删除先前绑定的处理程序。

Answer 2

如果您需要触发自定义事件（如您定义的），您应该调用.trigger()方法（每当您认为应该触发该事件时）：

$(o).trigger('my-awesome-event');

然后，使用 .bind() 或（如果您使用的是 jQuery 1.7+）.on() 定义一个或多个侦听器：

$(o).on('my-awesome-event', function(event){ ... });

Answer 3

您可以使用 jQuery 的绑定方法：

$( o ).bind( "show", function() {} );

这会将事件处理程序添加到事件处理程序列表中，不会覆盖现有的处理程序。 这里是文档

Answer 4

通过 jQuery 附加事件处理程序不会与任何其他事件冲突，只要事件处理程序不会阻止事件传播。

如果您希望在本机 JavaScript 中完成此操作，则需要使用字符串连接：

o.onShow = o.onShow + "function() { // something };"

Answer 5

如果你想用普通的 js 来做到这一点，那就有点棘手了。

const justLog = x => () => console.log(x)
const test = justLog('test called')
const testTwo = justLog('testTwo called')

document.querySelector('button').onclick = testTwo;

<button onclick="test">Test</button>

当然，这样做的问题是，这只是更改了侦听器，而没有附加它。

但是，我们可以通过对代码稍加修改来附加一个新的侦听器：

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)

<button onclick="test()">Test</button>

通过这种方式，我们可以将多个函数附加到一个元素，而无需覆盖之前的函数。