 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
親divの要素内容です。
子供divの要素内容です。
孫divの要素内容です。
孫divの要素内容です。 をクリックすると、 孫要素のイベントリスナーです のアラートがでます。これで終わりかと思ったら、 子要素のイベントリスナーです のアラートが出て、 親要素のイベントリスナーです のアラートがでます。 孫をクリックしたら、イベントが孫から子供へそして親へ伝達されています。この伝達が、 <input type="checkbox" id='id1' value="3000" onclick="myfunc()">TWELITE Red 3,000円<br> や、 document.getElementById('btn').onclick = function(){ と との違いです。上記の２つは応答する関数が１つだけで伝達はありません。 以下ソースです。 <!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>sample</title>
<script>
function load() {
document.getElementById('parent').addEventListener('click', function(){
window.alert('親要素のイベントリスナーです');
}, false);
document.getElementById('child').addEventListener('click', function(){
window.alert('子要素のイベントリスナーです');
}, false);
document.getElementById('grandchild').addEventListener('click', function(){
window.alert('孫要素のイベントリスナーです');
}, true);
}
document.addEventListener("DOMContentLoaded", load, false);
</script>
</head>
<body>
<div id="parent">
親divの要素内容です。
<div id="child">
子供divの要素内容です。
<div id="grandchild">
孫divの要素内容です。
</div>
</div>
</div>
</body>
</html>
addEventListener(type, listener, useCapture) useCaptureの値 孫をクリックした場合の伝達順序（３列）
孫はtrueでもfalseでも伝達に影響を与えません。 孫から親への伝達方向はバブリングフェーズといいます。 親から孫への伝達方向はキャプチャーフェーズといいます。 |