こんにちは!私は金容成です.
先週のコーディングテストでJavaScriptで解決すべき問題がありましたそうすると、reactだけを重視し、JavaScriptの知識が非常に不足していることに気づきました.
なので最近はヴァニラJsをよく使います開発に関する知識も公表します
まずJavaScriptイベントBubblingの位置づけ

イベントBubblingとは?

私たちがよく使うページを見ると、多くのコンポーネントが重なっていることがわかります.次の例を示します.

ユーザの立場では,両サイドの矢印ボタンを押すだけで,現在見ている商品が他の商品に移ると直感的に考える.他の商品の写真部分をクリックすると、その商品ページに移動したくなります.
これらの構成要素を実施する際には、構成がこのようなものであると仮定する.

<div class="item-image">
   <div class="left-button">
   <div class="right-button">
</div>

もちろん、実際にはこれとは異なる可能性がありますが、私は構造を議論しているだけなので、このように仮定します.
ではleft-buttonを押すと左の商品を見せ、right-buttonを押すと右の商品を見せ、それを包んだitem-imageを押すと商品の詳細ページを見せます
以下の内容を簡単に作成しました.

今私たちは彼らに活動さえすればいいです.
[<]ボタンを押した場合は、[左]ボタンをクリックします.
[>]ボタンをクリックすると、右クリックします.
黒い部分をクリックする場合は、[商品]をクリックします.このようなalertウィンドウが表示されます

//index.js

const left = document.getElementById("left-button")
const right = document.getElementById("right-button")
const item = document.getElementById("item-image")

left.addEventListener("click", () => {
  alert("왼쪽 버튼을 눌렀습니다.")
})

right.addEventListener("click", () => {
  alert("오른쪽 버튼을 눌렀습니다.")
})

item.addEventListener("click", () => {
  alert("상품을 클릭하였습니다.")
})

このようにコードを記述しhtmlファイルにバインドし、各ボタンをクリックします.
では、どのような現象が起こるのでしょうか.
黒いスペースをクリックしたとき、私たちが欲しい「商品」をクリックしました.このようなalertウィンドウが表示されるはずですしかし、左右のキーを押すと問題が発生します.alertイベントが2回発生するのが見えます.

これがJavaScriptのイベントbubling現象です.
複数の構成部品が重複している場合、何が選択されているのか分からないため、親構成部品のイベントが重複して現れる現象をイベントバッファと呼ぶ.これらの事象の発泡は,任意の設定によって引き起こされるものではなく,DOM自身が関数を扱う方法にすぎない.

本が重なって、この本の山を指して「本を持ってきなさい」と言うような状況です.
これらを修正するために、私たちはどんな措置をとるべきですか?

✋ e.stopPropagation()

やめろ.
このようなイベントバブル現象を回避するためにstopPropagationというJavaScript内蔵関数を用いることができる.

コードの使用

使いやすいです.イベント伝播を望まないサブコンポーネントの関数に一緒に記述すればよい.

left.addEventListener("click", e => {
  e.stopPropagation() // 사용법
  alert("왼쪽 버튼을 눌렀습니다.")
})

これらの変更を行った後、ネストされたイベントが発生しないように、上記のようにイベント伝播を励起できます.結果は次のとおりです.)

の最後の部分

JavaScriptスキルを短期間で追加するために、jqueryや外部モジュールを使用せずに作成したい動的イベントを実装します.だからこれらに対しても多くの考えがあります個人的にはこのような現象に頭がありますが、これは何なのかと聞くと、ためらうかもしれないと思います.
私のポスターと一绪に整理して、解决方法を知ってほしいです.:)
読んでくれてありがとう.