학원/복기
[JavaScript] addEventListener 메소드
조가루
2023. 6. 11. 17:41
addEventListener() 메소드
태그의 이벤트 리스너 속성값으로는 다수의 이벤트 처리 함수 호출이 가능하다.
<!--다수의 이벤트 처리 함수 호출 가능-->
<button type="button" onclick="eventHandleOne(); evnetHandleTwo();">이벤트 버튼1</button>
<script>
function eventHandleOne() {
alert("eventHandleOne 함수의 명령 실행");
}
function eventHandleTwo() {
alert("eevnetHandleTwo 함수의 명령 실행");
}
</script>
하지만 Node(Element) 객체의 이벤트 리스너 속성에는 하나의 이벤트 처리 함수만 등록할 수 있다.
<button type="button" id="btn2">이벤트 버튼2</button>
<script>
document.getElementById("btn2").onclick=eventHandleOne;
document.getElementById("btn2").onclick=eventHandleTwo;
</script>
>> evnetHandleTwo 함수의 명령만 실행된다.
Node(Element) 객체의 addEventListener() 메소드를 사용하면 다수의 이벤트 처리 함수 등록이 가능하다.
<button type="button" id="btn3">이벤트 버튼3</button>
<script>
document.getElementById("btn3").addEventListener("click", eventHandleOne);
document.getElementById("btn3").addEventListener("click", eventHandleTwo);
</script>
Node.addEventListener(eventName, callback[, useCapture])를 이용하여 이벤트 처리 함수 등록
→ addEventListener() 메소드를 호출할 때 useCapture 매개변수를 이용하면 캐쳐링 또는 버블링 단계에서 콜백함수를 호출하여 이벤트 처리 명령을 실행할 수 있다.
→ useCapture 매개변수에 [false]를 전달하면 버블링 단계에서 콜백함수를 호출하여 이벤트 처리 명령을 실행하고 [true]를 전달하면 캡쳐링 단계에서 콜백함수를 호출하여 이벤트를 처리한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style>
div {
border: 1px solid black;
padding: 30px;
text-align: center;
}
#red{ background: red; }
#green{ background: green; }
</style>
</head>
<body>
<div id="red">
<div id="green"></div>
</div>
<script>
document.getElementById("red").addEventListener("click", function() {
var tag=event.currentTarget.tagName;//현재 이벤트가 발생한 요소의 태그 이름을 가져옴
var id=event.currentTarget.getAttribute("id");//현재 이벤트가 발생한 요소의 ID 속성 값을 가져옴
alert("캡쳐링 단계 = "+tag+" 태그("+id+")에서 "+event.type+" 이벤트 발생");
}, true);
document.getElementById("green").addEventListener("click", function() {
var tag=event.currentTarget.tagName;
var id=event.currentTarget.getAttribute("id");
alert("버블링 단계 = "+tag+" 태그("+id+")에서 "+event.type+" 이벤트 발생");
//event.stopPropagation();
}, false);
document.getElementById("red").addEventListener("click", function() {
var tag=event.currentTarget.tagName;
var id=event.currentTarget.getAttribute("id");
alert("버블링 단계 = "+tag+" 태그("+id+")에서 "+event.type+" 이벤트 발생");
}, false);
</script>
</body>
</html>