event란
web browser에서 일어나는 동작들, 우리는 이 동작에 대해서 어떻게 행동할지를 js를 이용하여 조작할 수 있다.
Event Flow를 배워야 하는 이유
아래 예시를 보자.
<!DOCTYPE html>
<html>
<head>
<title>JS Event Demo</title>
</head>
<body>
<div id="container">
<button id='btn'>Click Me!</button>
</div>
</body>여기서 우리가 btn이라는 id를 가진 button을 누르면 어떻게 될까?
button, button's container, div, 페이지 자체 전부 누르는 것이 될 것이다.
이는 우리가 동작하는 바와 다를 수 있다. 그렇기 때문에 event flow에 대한 지식이 필요하다.
Event Flow
-
간단히 말해, event가 일어난 순서를 나타낸다. DOM tree를 통해서 이벤트가 일어나고propagated된 요소로부터 파악된다.
-
Two main event models
2-1.event bubbling
click event의 bubbling 예시이다. click event는 처음 button에서 시작하여 가장 less specific한 요소로 가게 된다.
최신 브라우저는windowobject까지 bubbling이 전달된다.2-2.event capturing
이 역시 click event의 capturing 예시이다. bubbling과 반대로 Document에서 button까지 capturing effect가 일어난다. -
DOM Level 2 Event flow (세가지 과정)
3-1. event captturing > event를 intercept할 수 있게 된다.
3-2. actual target이 event를 받는다.
3-3. event bubbling > event에 대한 마지막 response를 준다.
event object
event가 일어나면 web browser는 Event object를 event handler에 전달한다.
let btn = document.querySelector('#btn');
btn.addEventListener('click', function(event) {
console.log(event.type);
});event handler가 작동되면 event object는 삭제된다.
event flow를 조작하는 method
preventDefault() > event의 default behavior를 막는다. (cancelable property==true한정)bubbling 동작을 막지는 않는다.
stopPropagation() > event capturing, bubbling을 막는다. (bubbles property==true 한정)default behavior를 막지는 않는다.
reference
https://www.javascripttutorial.net/javascript-dom/javascript-events/
