IT_susu
이벤트 핸들링 본문
이벤트는 비일상적인 사건이며, 언제 발생할 지 사전에 예측할 수 없으므로 일반적인 제어흐름과 다르다.
예측 대신 발생하면 감지하여 그에 대응하는 처리를 호출하는 원리로 동작한다.
예) 키보드 esc를 누르면 팝업창이 닫힌다.
파란색 부분이 이벤트
분홍색 부분이 이벤트 핸들링이다.
어떠한 일이 발생하는 것이 이벤트이며,
이벤트가 발생할 때, 어떤 처리를 할 것인지를 명시한 부분이 이벤트 핸들링이다.
코드로 보면,
$('.btn_popup').on('click', function(){});
document.getElementById('home').addEventListener('click', function(){});
이벤트가 실행되는 원리
자바스크립트는 단일 쓰레드이기 때문에 동시에 여러 작업을 할 수 없습니다.
따라서 이벤트는 자바스크립트 엔진을 구동하는 환경, 즉 브라우저(또는 Node.js)가 담당합니다.
event loop가 callStack이 비었는지 EventQueue가 있는지 계속 확인하다가 call stack이 비어있고 event Queue에 큐가 있으면 call stack으로 옮겨 실행시킵니다.
이벤트 핸들러 등록
1. 인라인 방식
html요소의 이벤트 핸들러 속성에 이벤트 핸들러를 등록
2. 이벤트 핸들러 프로퍼티 방식
하나의 이벤트에 하나의 이벤트 핸들러만 등록 가능
<!DOCTYPE html>
<html>
<body>
<button class="btn">Click me</button>
<script>
const btn = document.querySelector('.btn');
// 이벤트 핸들러 프로퍼티 방식은 이벤트에 하나의 이벤트 핸들러만을 바인딩할 수 있다
// 첫번째 바인딩된 이벤트 핸들러 => 실행되지 않는다.
btn.onclick = function () {
alert('① Button clicked 1');
};
// 두번째 바인딩된 이벤트 핸들러
btn.onclick = function () {
alert('① Button clicked 2');
};
// addEventListener 메소드 방식
// 첫번째 바인딩된 이벤트 핸들러
// 3번째 인자가 true면 capturing, false면 bubbling(default)
btn.addEventListener('click', function () {
alert('② Button clicked 1');
}, true);
// 두번째 바인딩된 이벤트 핸들러
btn.addEventListener('click', function () {
alert('② Button clicked 2');
});
</script>
</body>
</html>
3. addEventListener 메소드 방식
여러 이벤트 등록 가능
캡처링과 버블링 지원
ie9부터 가능
이벤트의 흐름
버블링 - 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것
캡처링 - 자식 요소에서 발생한 이벤트가 부모 요소로부터 시작하여 이벤트를 발생시킨 자식 요소까지 도달하는 것
캡처링으로 시작해서 버블링으로 끝난다.
addEventListener 메소드의 세번째 매개변수에 true를 설정하면 캡처링 이벤트를 캐치, false 또는 미설정하면 버블링으로 전파되는 이벤트를 캐치한다.
이벤트 객체
이벤트 객체는 이벤트를 발생시킨 요소와 이벤트에 대한 정보를 제공하는 객체다.
이벤트 핸들러에 인자로 암묵적으로 전달되므로, 이벤트 핸들러를 선언할 때 첫번째 매개변수에 명시적으로 선언해야 사용가능하다.
- event.target : 실제로 이벤트를 발생시킨 요소
- event.currentTarget : 이벤트에 바인딩된 dom 요소를 가리킨다. this와 같다.
- event.type : 발생한 이벤트의 종류를 문자열로 반환.
- event.cancelable : 요소의 기본 동작을 취소시킬 수 있는지 여부 반환
- event.eventPhase : 이벤트 흐름상에서 어느 단계에 있는지 반환 (0 - 이벤트 없음, 1 - 캡처링, 2 - target, 3 - 버블링)
이벤트 위임
동적으로 생성되는 DOM 요소에 이벤트를 바인딩하려는 경우, 아직 만들어지지 않은 DOM이므로 이벤트를 등록할 수 없다.
또한 다수의 자식 요소에 각각 이벤트 핸들러를 바인딩하려면 양이 많아 실행 속도가 저하된다. 이때 이벤트 위임을 써볼 수 있다. 이 때, 위임이 가능한 이유는 이벤트 흐름에 의해 이벤트를 발생시킨 요소의 부모요소에도 영향을 미치기 때문에 가능.
기본 동작의 변경
- event.preventDefault() : 요소가 가지고 있는 기본 동작 중단
- event.stopPropagation() : 이벤트가 부모 요소로 전파되는 것을 중단. 부모 요소에 동일한 이벤트에 대한 다른 핸들러가 지정되어 있을 경우 사용.
- return false : preventDefault, stopPropagation 둘 다 실행하는 방법. 단, 이 방법은 jQuery사용할 때와 아래의 방법에만 적용된다.
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com" onclick='return handleEvent()'>go</a>
<script>
function handleEvent() {
return false;
}
</script>
</body>
</html>
==================
수정
2019.09.05
'[ javascript ] > JavaScript' 카테고리의 다른 글
| DOM API에 접근하기 (0) | 2018.12.30 |
|---|---|
| 클로져 (Closure)와 실행 컨텍스트 (0) | 2018.10.30 |
| 자바스크립트의 메모리 관리 (0) | 2018.10.17 |
| 이벤트객체 (0) | 2018.04.22 |
| 키보드 누르는 이벤트 (0) | 2018.04.21 |