なんかのテキストで
addEventListener の第３引数に false をつける箇所があった
const lists = document.getElementById('lists');
const target = document.getElementById('btn');
target.addEventListener('click', function() {
const form = document.getElementById('name');
const list = document.createElement('li');
list.textContent = form.value;
lists.appendChild(list);
form.value = "";
},false); (←ここ)
これってなんだって思って調べた
どうやらキャプチャフェーズとバブリングフェーズの制御をしているらしい
イベントの伝播が
親要素から起こるのと
イベント発生部から起こるかの違いとのこと
なるほど全然分からん。
って思いいろいろ試してみた
第３引数が false の場合
<body>
<div id="div1">
div1
<div id="div2">
div2
<div id="div3">
div3
</div>
</div>
</div>
<script>
const target1 = document.getElementById("div1")
const target2 = document.getElementById("div2")
const target3 = document.getElementById("div3")
target1.addEventListener("click", () => {
alert("div1")
}, false)
target2.addEventListener("click", () => {
alert("div2")
}, false)
target3.addEventListener("click", () => {
alert("div3")
}, false)
</script>
</body>
</html>
こんなコードがあるとして
div3 をクリックするとイベントの伝播が起きるので
div3 ⇒ div2 ⇒ div1 の順でアラートがでる
第３引数が true の場合
<body>
<div id="div1">
div1
<div id="div2">
div2
<div id="div3">
div3
</div>
</div>
</div>
<script>
const target1 = document.getElementById("div1")
const target2 = document.getElementById("div2")
const target3 = document.getElementById("div3")
target1.addEventListener("click", () => {
alert("div1")
}, true)
target2.addEventListener("click", () => {
alert("div2")
}, true)
target3.addEventListener("click", () => {
alert("div3")
}, true)
</script>
</body>
</html>
このコードも上と同じ
ただ第３引数は true にしている
今回は div3 をクリックすると親要素からイベントの伝播が起きる
つまり
div1 ⇒ div2 ⇒ div3 の順でアラートがでる