なぜAddEventListenerが必要なのですか？
クリップを見てみましょう：
HTMLコード
<div id = "box">夢を追いかける</div>
onでコード
window.onload = function（）{var box = document.getElementById（ "box"）; box.onclick = function（）{console.log（ "i are box1"）; } box.onclick = function（）{box.style.fontsize = "18px"; console.log（ "i ambox2"）; }} running result：「私はbox2」私はそれを見ました、2番目のオンクリックは最初のオンクリックを上書きしました。ほとんどの場合、必要な結果を完了するために使用できますが、複数の同一のイベントを実行する必要がある場合があります。私たちが望むものを完了するために使用できない場合、推測する必要がないことは明らかです。あなたは知っておく必要があります、正しい！ AddEventListenerは同じイベントを複数回バインドでき、以前のイベントを上書きしません。
AddEventListenerを使用したコード
window.onload = function（）{var box = document.getElementById（ "box"）; box.addeventlistener（ "click"、function（）{console.log（ "i are box1"）;}）box.addeventlistener（ "click"、function（）{console.log（ "im box2"）;}）}実行結果：私はbox1私がbox2AddEventListenertメソッドの最初のパラメーターは、イベント名に記入されています。書き込む必要はないことに注意してください。 2番目のパラメーターは関数です。 3番目のパラメーターは、バブルステージまたはキャプチャステージのイベントハンドラーのプロセスを指します。 trueがキャプチャ段階の処理を表す場合、falseがバブルステージの処理を表す場合、3番目のパラメーターを省略できます。ほとんどの場合、3番目のパラメーターを使用する必要はありません。 3番目のパラメーターが書かれていない場合、デフォルトのfalseはfalseです。
3番目のパラメーターの使用
時々そうです
<body>
<div id = "box">
<div id = "child"> </div>
</div>
</body>
ボックスにクリックイベントを追加した場合、ボックスを直接クリックしても問題ありませんが、子要素をクリックすると、どうすればよいですか？ （実行注文）
box.addeventlistener（ "click"、function（）{console.log（ "box"）;}）child.addeventlistener（ "click"、function（）{console.log（ "child"）;}）実行結果：子ボックスつまり、デフォルトのイベントは、イベントが泡立つ順に実行されます。
3番目のパラメーターが真であると書かれている場合、イベントキャプチャの実行順に実行されます。
box.addeventlistener（ "click"、function（）{console.log（ "box"）;}、true）child.addeventlistener（ "click"、function（）{console.log（ "child"）;}）実行結果：ボックス子イベントバブル実行プロセス：
最も具体的な要素（クリックした要素）から上に泡立ち始めます。上記の私たちのケースを取り上げてください、そしてそれの順序は次のとおりです：child-> box
イベントキャプチャ実行プロセス：
最も特定の要素（最も外側の要素のボックス）から内側に泡立ち始めます。上記のケースを取り上げてください。注文は次のとおりです
上記の記事は、AddEventListenerとONの違いが私があなたと共有するすべてのコンテンツであることを包括的に理解しています。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。