<html>
<head>
<style>
html{border:5px solid red;padding:30px;}
body{border:5px solid green;padding:30px;}
fieldset{border:5px solid blue;padding:30px;}
input{border:5px solid black;padding:30px;}
</style>
</head>
<body>
<fieldset>
<legend>event propagation</legend>
<input type="button" id="target" value="target">
</fieldset>
<script>
function handler(event){
var phases = ['capturing', 'target', 'bubbling']
console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);
}
function stophandler(event){
var phases = ['capturing', 'target', 'bubbling']
console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);
event.stopPropagation();
}
document.getElementById('target').addEventListener('click', handler, true);
document.querySelector('fieldset').addEventListener('click', handler, true);
document.querySelector('body').addEventListener('click', stophandler, true);
document.querySelector('html').addEventListener('click', handler, true);
</script>
</body>
</html>
ㅇ
음좀더 공부를 하고 생각을 해야겠다
phases 에서 받는것이 입력되어온 값인듯 한데 event자체가 target이되는것아닌가???
잘 모르겟다
phases 가 뭔지 이해가 안간다
'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글
| 24.JavaScript load event (0) | 2020.04.17 |
|---|---|
| 23.JavaScript event 3 (0) | 2020.04.17 |
| 20.JavaScript event 1 (0) | 2020.04.17 |
| 19.JavaScript property (0) | 2020.04.17 |
| 18.JavaScript Inline (0) | 2020.04.17 |
Or71nH