2

onShow()オブジェクトが表示されたときに（私によって）呼び出される関数を持つ独自のオブジェクトがあります。割り当てによってこの関数をオーバーライドできます

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

ただし、関数の以前のバージョンは削除されます。したがって、既存のハンドラーを保存したい場合は、それをキャッシュして新しいハンドラーを呼び出す必要があります。

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

しかし、この方法では、前のハンドラーを 1 つしかキャッシュできません。それらがたくさんある場合はどうなりますか？

このタスクを達成するための便利な方法はありますか? このタスクは文献でどのように命名されていますか? 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+ を使用している場合) を使用して、1 つ以上のリスナーを定義します.on()。

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

jQuery の bind メソッドを使用できます。

$( 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

バニラ 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 に答える