Event Bubbling -
이벤트 버블링은 이벤트가 특정 요소에 이벤트가 발생했을 때, 이벤트가 발생한 요소보다 상위요소에 전달되는것을 의미한다.
상위요소? HTML요소는 트리구조를 갖는다. 트리구조에서 한 단계 위에 있는 요소를 상위요소라 하고, 최상위요소를 body라한다.
Event Capture -
이벤트 캡쳐는 최상위요소(body)에서 이벤트를 발생할 태그까지 탐색한다.
addEventListener() API에서 옵션 객체에 capture:true로 해주면 감지
이벤트 버블링은 이벤트를 감지하기위해 하위 -> 상위로 탐색
이벤트 캡쳐는 이벤트를 감지하기위해 상위 -> 하위로 탐색
반대되는 개념이라 할 수 있다.
Event Delegation -
이벤트 위임은 이벤트리스너를 등록한 시점이 달라 새로 추가될 작업에 이벤트리스너가 적용되지 않을 때 사용할 수 있는 작업방법이다.
이벤트리스너를 상위요소 태그에 걸면 하위에 있는 태그들의 이벤트를 감지한다. (이벤트 버블링)
이벤트 리스너 등록
- 이벤트의 대상이 객체나 요소에 property로 등록하는 방법
- 객체나 요소의 method event listener를 전달하는 방법
1. 객체나 요소에 property로 등록하는 방법
- 자바스크립트 코드에서 property로 등록
- HTML 태그에 속성으로 등록
property로 등록
window.onload = function() { //HTML문서가 로드될 때 실행 var text = document.getElementById("text"); //아이디가 "text"인 요소를 선택 text.innerHTML = "HTML 문서가 로드되었습니다"; }
장점 - 거의 모든 브라우저가 이벤트 타입을 지원
단점 - 이벤트 타입별로 오직 하나의 이벤트 리스너만 등록 가능
HTML태그에 속성으로 등록
<p>이 문자열을 클릭해 보세요!</p>
단점 - HTML코드에 자바스크립트 코드가 추가되어 가독성이 좋지 않다.
2. 객체나 요소의 메소드에 이벤트 리스너를 전달하는 방법
- addEventListener()
- attachEvent()
객체.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식)
- 이벤트 명 : 이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달
- 실행할 이벤트 리스너 : 지정된 이벤트가 발생했을 때 실행할 이벤트 리스너 전달
- 이벤트 전파 방식 : false면 버블링방식으로, true면 캡처링 방식으로 이벤트를 전달
var showBtn = document.getElementById('btn'); showBtn.addEventListener("click", showText); function showText(){ document.getElementById("text").innerHTML = "텍스트!"; }
id가 btn인 button 객체를 변수에 넣고 addEventListener로 click 했을 때, showText함수를 호출
*property로 등록할 때는 on타입 이벤트 타입을 사용, addEventListener()메소드는 on이 붙지 않은 타입을 사용
이벤트 리스너 삭제
removeEventListener() 메소드를 사용하면, 등록된 이벤트리스너 삭제
btn.removeEventListener("mouseover", mouseoverBtn); document.getElementById("text").innerHTML = "이벤트 리스너 삭제"
추가띠
preventDefault
stoppropagation
