onclickに代入しただけでイベントが起こってしまう

Question

前提・実現したいこと

"ボタン"をクリックしたらdivタグのonclick属性にpタグ内を書き換える関数が代入され、その後divタグ内をクリックでpタグ内が書き換わるというプログラムのつもりだったのですが、"ボタン"のクリックだけでpタグ内が書き換わってしまいます。

これは何故なのでしょうか？ また上のようなプログラムを実現するにはどうしたらいいでしょうか？ 単に私の知識が不足しているだけではございますが、どうかご教授お願いします。

該当のソースコード

<div id="div">
    <p onclick="test()">ボタン</p>
    <p id="p"><p>
</div>

<script>
const div = document.getElementById('div');
function test() {
    div.onclick = event => document.getElementById('p').innerText = "Hello";
}
</script>

Answer 1

これは何故なのでしょうか？

イベントがバブリングしていくので、1回目のクリック時にセットしたイベントハンドラが、バブリングに間に合ってしまってその場で動いているものと思われます。

また上のようなプログラムを実現するにはどうしたらいいでしょうか？

イベントのセットを非同期化するのも一案です。

function test() {
    // イベントのセットを100ミリ秒後に回す
    setTimeout(() => {
        div.onclick = event => document.getElementById('p').innerText = "Hello";
    }, 100);
}

Comments

[mito.2357]

回答ありがとうございます！
バブリングというのがあるのですね。発火の順番についての仕様を全く知らなかったので、勉強になりました。

Answer 2

ちゃんとやるならこう

<style>
#div{background-Color:yellow;}
#btn{background-Color:gray;width:200px;}
</style>
<script>
const test=()=>{
  document.querySelector('#div').addEventListener('click',e=>{
    document.querySelector('#p').textContent = "Hello";
  },false);
}
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#btn').addEventListener('click',e=>{
    e.stopPropagation();
  });
});

</script>
<div id="div">
    <p onclick="test()" id="btn">ボタン</p>
    <p id="p"><p>
</div>

ボタンのclickは上位に伝播しないようにすること
ただしこのままではボタンを2度押してもhelloが表示されないので、
どういう仕様が希望なのかを明確にすべきです

Comments

[mito.2357]

回答ありがとうございます！
説明が分かりづらくすみません。ボタンのクリックではdivにクリックイベントを追加するだけという仕様を想定していました。stopPropagation()というメソッドで伝搬を止められるのですね。本質問と関係のない趣旨になるのですがonclickよりもaddEventListenerの方が良いのでしょうか？

[x_x]

addEventListener にすると、見た目変わらなくてもボタンを押した分だけ走ってしまうことになりますが。

[mito.2357]

なるほど、ありがとうございます！