JavaScriptのonclickとclickの違いの詳細な説明

これがddEventListenerとonの違いです

addEventListener が必要な理由は何ですか?

まずはクリップを見てみましょう:

<div id="box">テスト</div>

コードの使用:

windwo.onload = 関数(){
  var box = document.getElementById("box");
  box.onclick = ()=>console.log("私はbox1です");
  box.onclick = ()=>console.log("私はbox2です");
}
// 実行結果: 私はbox2です

2 番目の onclick イベントが最初の onclick をカバーしているのがわかります。ほとんどの場合、on を使用して目的の効果を得ることができますが、場合によっては複数の同一イベントを実行する必要があり、これは明らかに on を使用して実現することは不可能です。ただし、addEventListener を使用すると、以前のイベントを上書きせずに同じイベントを複数回バインドできます。

addEventListener を使用したコード

window.onload = 関数(){
  var box = document.getElementById("box");
  box.addEventListener("click",()=>console.log("私はbox1です"));
  box.addEventListener("click",()=>console.log("私はbox2です"));
}
// 操作結果: 私はbox1です
            //私はボックス2です

addEventListenerメソッドの最初のパラメータにはイベント名が入ります。記述する必要がないことに注意してください。2 番目のパラメータは関数にすることができます。3 番目のパラメータは、イベントをバブリング ステージで処理するか、キャプチャ ステージで処理するかを示します。true の場合はキャプチャ ステージで処理することを意味します。false の場合はバブリング ステージで処理することを意味します。3 番目のパラメータは省略できます。ほとんどの場合、3 番目のパラメータは必要ありません。3 番目のパラメータを記述しない場合は、デフォルトで false になります。

3番目のパラメータの使用

時々、状況は次のようになります:

<本文>
  <div id = "ボックス">
    <div id = "子"></div>
  </div>
</本文>

ボックスに cclick イベントを追加すると、ボックスを直接クリックしても問題ありませんが、子要素をクリックした場合はどのように実行されますか?

box.addEventListener("click",()=>console.log("box"));
child.addEventListener("click",()=>console.log("child"));
// 実行結果: 子 -> ボックス

つまり、デフォルトではイベント バブリングの実行順序に従います。

3 番目のパラメータが true の場合、イベントがキャプチャされた順序で実行されます。

要約する

1. onclickイベントは一度に1つのオブジェクトのみを指すことができます

2. addEventListener 1つのイベントに複数のリスナーを登録できる

3. addEventListener任意のDOM要素に有効ですが、onclickはHTML要素に限定されます。

4. addEventListenerリスナーのトリガーフェーズ（キャプチャ/バブル）を制御できます。

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。