2

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

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

但它删除了以前版本的函数。所以，如果我想保存现有的处理程序，我应该缓存它并调用新的处理程序：

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

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

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

4

5 回答 5

5

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

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

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

于 2012-02-09T14:58:48.603 回答
4

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

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

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

$(o).on('my-awesome-event', function(event){ ... });
于 2012-02-09T15:03:47.933 回答
2

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

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

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

于 2012-02-09T14:58:00.920 回答
1

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

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

o.onShow = o.onShow + "function() { // something };"
于 2012-02-09T14:59:14.853 回答
0

如果你想用 vanilla 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>

通过这种方式，我们能够将多个函数附加到一个元素，而不会覆盖以前存在的函数。

于 2019-05-02T10:11:43.730 回答