코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript EventListener Call</title> <style> #divBox { width: 100%; height: 100px; border: 2px solid red; } #paraBox { width: 80%; height: 50px; border: 2px solid orange; } #spanBox { border: 2px solid green; } </style> </head> <body> <h1>캡쳐링 이벤트 전파</h1> <div id="divBox"> <p id="paraBox">박스 안의 여러 곳을 <span id="spanBox">클릭</span>해 보세요!</p> </div> <p id="text"></p> <script> // 각 요소마다 캡쳐링 방식으로 click 이벤트 리스너를 등록함. document.getElementById("divBox").addEventListener("click", clickDiv, true); document.getElementById("paraBox").addEventListener("click", clickPara, true); document.getElementById("spanBox").addEventListener("click", clickSpan, true); function clickDiv(event) { document.getElementById("text").innerHTML += "div 요소를 click 하셨네요!<br>"; } function clickPara(event) { document.getElementById("text").innerHTML += "p 요소를 click 하셨네요!<br>"; } function clickSpan(event) { document.getElementById("text").innerHTML += "span 요소를 click 하셨네요!<br>"; } </script> </body> </html>
