이벤트란?
웹 브라우저나 사용자가 행하는 어떤 동작
사용자와 웹페이지가 상호 작용을 하며 브라우저가 감지하는 것
i.e.) 웹 문서에서 키보드의 키를 누르는 것, 브라우저가 웹 페이지를 불러오는 것
* 이벤트 리스너 / 이벤트 핸들러: 어떤 이벤트 발생 시 처리하는 함수
이벤트의 종류
- 마우스 이벤트: 마우스에서 버튼이나 휠 버튼을 조작할 때 발생하는 이벤트
- 키보드 이벤트: 키보드에서 특정 키를 조작할 때 발생하는 이벤트
- 문서 로딩 이벤트: 서버에서 웹문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여줄 때 발생하는 이벤트
- 폼 이벤트: 폼 요소에 내용을 입력하면서 발생할 수 있는 이벤트
이벤트 등록 방법 3가지
1. 인라인 방식 (Inline)
- 이벤트를 HTML 요소의 속성으로 직접 지정하는 방식
- 단점: HTML 코드에 자바스크립트를 추가해서 코드가 섞여 유지 보수에 좋지 못하다
<button onclick="alert('Hello World!);">Click</button>2. 프로퍼티 방식 (Property)
- 인라인 방식의 단점을 보완하기 위해 자바스크립트 코드에 프로퍼티 등록 방식
- 단점: 하나의 이벤트 핸들러 프로퍼티엔 하나의 이벤트 핸들러 바인딩이 가능하다
<button onclick="testBtn">click</button>
<script>
let testBtn = document.querySelector('#testBtn')
testBtn.onclick=function(){
alert('Hello World!') // 실행되지 않음
}
testBtn.onclick=function(){
alert('Hello World!!') // 실행
}
</script>3. addEventListener() 함수
- 프로퍼티 방식은 1개의 이벤트 핸들러만 바인딩 가능하지만 addEventListener() 방식은 하나 이상 가능하다
- addEventListener() 함수는 버블링과 캡쳐링을 지원한다
<button id="testBtn2">click</button>
<script>
let testBtn2 = document.querySelector('#testBtn2')
function testFunc(){
alert('Hello World!')
}
testBtn2.addEventListener('click', testFunc) // 실행
testBtn2.addEventListener('click', Function(){
alert('Hello World!!!') // 실행
}
</script>이벤트리스너 삭제 방법
onclick은 null값을 준다
elem.onclick = nulladdEventListener()는 removeEventListener()로 삭제한다
testBtn2.removeEventListener('click', testFunc);
이벤트 버블링 & 캡쳐링
이벤트 버블링
이벤트 버블링: 자식에서 부모요소로 이벤트가 동작하는것
한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.
<p> 요소를 클릭하면 p → div → form 순서로 3개의 alert 창이 뜬다
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>이벤트 버블링 중단하기
이벤트 객체의 메서드인 event.stopPropagation()를 사용
<!-- button을 클릭해도 body에 있는 alert 이벤트는 실행이 되지 않는다 -->
<body onclick="alert(`버블링은 여기까지 도달하지 못합니다`)">
<button onclick="event.stopPropagation()">클릭해 주세요</button>
</body>이벤트 캡쳐링
이벤트 캡쳐링: 부모에서 자식요소로 이벤트가 동작하는것
이벤트 버블링과 반대되는 개념으로 한 요소에 이벤트가 발생하면 이 요소에 가장 최상단 조상 요소에 할당된 핸들러가 동작하고 해당 요소의 이벤트 핸들러가 가장 마지막에 동작하는 것.
addEventListener로 이벤트 캡쳐링 실행하기
세번째 아규먼트에 true값 또는 { capture: true }가 오면 이벤트 캡쳐링이 일어난다. default 값은 false 또는 { capture: false }이며 이벤트 캡쳐링이 일어나지 않는다.
EventTarget.addEventListener(type, listener, useCapture)
클래스 three를 클릭하면 .three → .two → .one 순서로 클래스이름이 콘솔창에 출력된다
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
<script>
var divs = document.querySelectorAll('div')
divs.forEach(function(div) {
div.addEventListener('click', logEvent, {
capture: true
})
})
function logEvent(event) {
console.log(event.currentTarget.className)
}
</script>
이벤트 위임 (Event Delegation)
하나의 부모요소에 이벤트를 등록하여 부모가 이벤트를 모든 자식요소에게 위임하는 방식이다. 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트를 제어한다. 동적인 요소들을 처리하기 수월하고 이벤트 핸들러를 더 적게 등록해주기 때문에 메모리를 절약할 수 있다는 장점이 있다. 하위 요소가 많아질수록 이벤트리스너를 다는 작업이 번거롭기 때문에 이벤트 위임을 사용하는 것이다.
이안92 블로그 '이벤트 관리 방법 (버블링, 캡쳐링, 이벤트 위임)' 참조
Reference
'JavaScript' 카테고리의 다른 글
| [자바스크립트] 콜백함수와 콜백지옥 (0) | 2022.11.18 |
|---|---|
| [자바스크립트] 동기적 코드와 비동기적 코드 (0) | 2022.11.18 |
| [자바스크립트] 자바스크립트에서 this란? (0) | 2022.11.18 |
| [자바스크립트] 객체 구조분해할당시 key 이름 다시 지정해주기 (0) | 2022.08.10 |
| [자바스크립트] 이벤트 총정리 (이벤트 종류, 이벤트 핸들러와 리스너, 버블링과 캡처링을 이용한 이벤트 위임) (0) | 2022.08.09 |
댓글