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>
'학원 > 복기' 카테고리의 다른 글
| [JavaScript] form 태그 관련 이벤트 (사용자 입력값 검증) (0) | 2023.06.11 |
|---|---|
| [JavaScript] DHTML(Dynamic HTML) (0) | 2023.06.11 |
| [JavaScript] 이벤트 전파(Event Propagation) (0) | 2023.06.11 |
| [JavaScript] 이벤트 처리(Event Handle) / this 키워드 / 태그의 기본 이벤트 처리 기능 (0) | 2023.06.09 |
| [JavaScript] DOM(Document Object Model) : 문서 객체 모델 / Element 객체 (0) | 2023.06.09 |
