0

正しいボタンがクリックされた場合にのみ、指定された関数が呼び出されるようにします。

function callback(func){
func();
}

主な機能とその結果:

試行 A:

document.addEventListener('DOMContentLoaded', function () {

document.getElementById('num1').addEventListener('click', callback(function1));
document.getElementById('num2').addEventListener('click', callback(function2));

});

結果: ページを開いていずれかのボタンをクリックすると、function1 が実行されます。

試行 B:

document.addEventListener('click', function () {

document.getElementById('num1').addEventListener('click', callback(function1));
document.getElementById('num2').addEventListener('click', callback(function2));

});

結果: ページの任意の場所をクリックすると function1 が実行されます

試行 C:

document.getElementById('num1').addEventListener('click', callback(function1));
document.getElementById('num2').addEventListener('click', callback(function2));

結果: ページを開いてボタンをクリックすると、function1 が実行され、ページがリロードされます。

試行 D:

document.addEventListener('click', function () {

//The first ID doesn't exist
document.getElementById('imaginaryNum1').addEventListener('click', callback(function1));
document.getElementById('num1').addEventListener('click', callback(function1));
document.getElementById('num2').addEventListener('click', callback(function2));

});

結果: ページの任意の場所をクリックすると function1 が実行されます

試行 E:

//The first ID doesn't exist
document.getElementById('imaginaryNum1').addEventListener('click', callback(function1));
document.getElementById('num1').addEventListener('click', callback(function1));
document.getElementById('num2').addEventListener('click', callback(function2));

結果: ページを開いてボタンをクリックすると、function1 が実行され、ページがリロードされます。

4

2 に答える 2

5

確かに、そうではないでしょう。しかし、あなたのコードを見ると、イベントを委譲した方が良いかもしれません:それはそれほど難しいことではありません. 基本的に、個々の要素のそれぞれを含む dom のレベルで必要なイベントをリッスンし、イベントを発生させた要素が重要かどうかを確認するような方法でハンドラーを記述します。 、そうでない場合は、単に戻ります。
また、期待する 3 番目の引数がありません: キャプチャ段階またはバブリング段階でaddEventListenerイベントを処理したい天気を示すブール値。

また、ハンドラー関数で奇妙なことをしていることにも気付きました。それでいくつかの問題が発生するでしょう。基本的にaddEventListener、2番目の引数として期待されるのはfunction への参照です。関数の戻り値を渡しています(あなたの場合は未定義です)。

function clickHandler(e)//accept event argument
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (!target.id.match(/num[0-9]/))
    {//the clicked element doesn't have num1, num2, num3... as id, no need to handle this event
        return e;
    }
    //handle event. target is a reference to the clicked element
}
document.body.addEventListener('click',clickHandler,false);//<-- just the function name, no parentheses

必要なのは、すべてのクリック イベントを処理する 1 つのリスナーだけです。

これは、私が投稿した、イベントの委譲に関する JS に関する質問の 2 つです。コードを見て、リンク先の記事を読んでください。すぐに解決できます。IE
での変更イベントの委任--リスナーを使用
した IE<9 でのメモリ リークの回避には注意が必要onloadです。

于 2012-10-30T15:51:01.717 に答える
3

callback渡された関数をすぐに実行するため、渡されることはありません。addEventListener代わりにundefined渡されます。

.addEventListener('someEvent', callback(functionN), false)あくまで中古品.addEventListener('someEvent', (function(){ functionN() })(), false)です。

に変更し.addEventListener('someEvent', functionN, false)て何が起こるかを確認してください - それでもエラーが発生する場合は、Web ブラウザのスクリプト パネルを見て、どのようなエラーが生成されているかを確認してください。

于 2012-10-30T15:50:42.680 に答える