addEventListenerがインラインで追加された理由は、参照された関数immediatlyのonclick fireですか？

Question

最近のプロジェクトで私はいくつかのコードを継承してくれました。

インラインonclick関数からイベントリスナーを追加すると、すぐにaddEventListner（）で参照されている関数が呼び出される理由は誰でも説明できますか？

function refFunction() { 
 
    console.log("Test Function"); 
 

 
    if (document.removeEventListener) { 
 
    document.removeEventListener('click', refFunction, false); 
 
    } else if (document.detachEvent) { 
 
    document.detachEvent('onclick', refFunction); 
 
    } 
 
} 
 

 
function addEvtLstnr() { 
 
    if (document.addEventListener) { 
 
    document.addEventListener('click', refFunction, false); 
 
    } else if (document.attachEvent) { 
 
    document.attachEvent('onclick', refFunction); 
 
    } 
 
}

<input type="button" value="Add Evt listener" onClick="addEvtLstnr();">

ここJSfiddleを参照してください：私は希望Example JSFiddle

効果は、ボタンのonclickのインラインでイベントハンドラを追加することですが、それに対して発生しません参照された関数を呼び出す。

任意の助けを理解され、

J.

Answer 1

ボタンがクリックされたときに聴取者が文書に追加されます。次に、クリックイベントがドキュメントにバブルして、リスナを起動します。

これを避けるには、イベントが追加される前にバブリングが完了するように、タイムアウトを使用してリスナーを追加します。

また、イベントの伝播を停止してバブルしないようにすることもできます。

function refFunction() { 
 
    console.log("Test Function"); 
 

 
    if (document.removeEventListener) { 
 
    document.removeEventListener('click', refFunction, false); 
 
    } else if (document.detachEvent) { 
 
    document.detachEvent('onclick', refFunction); 
 
    } 
 
} 
 

 
function addEvtLstnr() { 
 
    if (document.addEventListener) { 
 
    document.addEventListener('click', refFunction, false); 
 
    } else if (document.attachEvent) { 
 
    document.attachEvent('onclick', refFunction); 
 
    } 
 
}

// Call addEvtLstnr after a pause so event finishes bubbling before listener added 
 
<input type="button" value="Add Evt listener" onclick="setTimeout(addEvtLstnr, 0);"> 
 

 
// Stop propagation of the event so that it doesn't reach the listener 
 
<input type="button" value="Add Evt listener 2" onclick="addEvtLstnr();event.stopPropagation();">

ところで、関数の宣言はセミコロンで終了していません。 ;-)

Answer 2

引用：「インラインonclick関数からイベントリスナーを追加すると、すぐにaddEventListner（）で参照されている関数が呼び出されるのはなぜですか？まさに真実ではない

は、イベントが最後に、あなたが実際にイベントリスナーを追加した時ルート要素に達し、火災できるようにするために、かなりの数の要素をを伝播する必要があります。

ルート要素は、クリックイベントリスナーが割り当てられた後、入力要素でクリックイベントを受け取ります。したがって、規定通りに起動する必要があります。