이벤트의 종류
키보드 이벤트
| Event | Description |
|---|---|
| keydown | 사용자가 키를 눌렀을 때 |
| keyup | 사용자가 키를 뗄 때 |
| keypress | 사용자가 눌렀던 키의 문자가 입력되었을 때 |
마우스 이벤트
| Event | Description |
|---|---|
| click | 사용자가 마우스를 클릭했을 때 |
| dblclick | 마우스를 더블 클릭했을 때 |
| mousedown | 마우스 버튼을 누르고 있을 때 |
| mouseup | 눌렀던 마우스 버튼을 뗄 때 |
| mousemove | 마우스가 움직였을 때 |
| mouseover | 요소 위로 마우스를 움직였을 때 |
| mouseout | 요소 밖으로 마우스를 움직였을 때 |
폼 이벤트
| Event | Description |
|---|---|
| input | input, textarea, select 요소의 값이 변경될때마다 |
| change | input, textarea, select 요소의 값의 변경이 완료된 후 |
| submit | form을 제출할 때 |
| reset | reset 버튼을 눌렀을 때 |
input event와 change event의 공통점
type이 checkbox인 경우, 체크하거나 해제할 때마다 이벤트 발생
type이 radio인 경우, 요소가 체크될 때만 이벤트 발생
input event와 change event의 차이점
텍스트 입력의 경우,
input event는 글자가 수정될 때마다 발생하고
change event는 수정 후 커서 포커스가 밖에 있을 때 발생
이벤트 리스너(Event Listener)
이벤트가 발생했을 때 이를 잡아내고, 지정된 함수를 실행하는 것을 Event Hanlder라 부른다.
자바스크립트에서는 세 가지 방법으로 이벤트를 잡아낸다.
❌Inline Event Handler
사용하지 않기로 하자
<button onclick="alert("Hello")"> 버튼 </button> 우선 HTML 파일에 JavaScript를 동시에 작업해야하기 때문에 가독성이 나빠지며,
100개의 버튼이 있으면 100개의 속성을 입력해야해서 유지보수 또한 비효율적이다.
Event Handler Properties
효율적이진 않지만 사용할만하다.
btn.onclick = ( ) => {alert("Hello")};HTML의 속성은 property를 통해 접근할 수 있다.
이를 이용하면 인라인이 아니어도 script 파일에서 직접적으로 이벤트를 적용할 수 있다.
하지만 property를 이용하면 하나의 이벤트에 두 가지 함수를 실행할 수 없다는 단점이 있다.
element.onclick = function1; //(x)
element.onclick = function2; ‼️addEventListner
가장 권장되는 방식이다.
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
alert("Hello");
})이 메소드는 두 개의 매개변수를 가지는데,
첫 번째는 어떤 이벤트가 발생하면 함수를 실행할지를 나타내는 문자열이고
두 번째는 이벤트 발생 후 실행될 콜백 함수이다.
추가로 하나의 이벤트에 두 개 이상의 Listener를 등록할 수 있다.
btn.addEventListener("click", functionA);
btn.addEventListener("click", functionB);이미 등록된 listener를 삭제하는 방법도 있다.
btn.removeEventListener("click", changeBackground);Event Object
event handler를 사용하다보면 콜백 함수에 event evt e 를 매개변수로 사용하는 경우가 있는데 이를 이벤트 객체라고 부른다.
처음부터 handler에 바로 주어지며, 이 객체는 여러 기능과 정보를 담고 있다.
가장 많이 쓰는 예로는 아래와 같이 있다.
| Property | Description |
|---|---|
| e.target | 이벤트가 위임되어 발생하는 자식의 위치/내가 클릭한 자식 요소를 반환 |
| e.currentTarget | 이벤트 핸들러가 부착된 요소를 반환 |
| e.preventDefault() | 브라우저의 기본 동작을 차단 |
| e.stopPropagation() | 이벤트의 버블링 단계가 진행되지 않도록 차단 |
Event Bubbling & Capturing
이벤트가 자식으로부터 부모로 위임되는 것을 Bubbling이라고 하고,
부모로부터 자식으로 위임되는 것을 capturing이라고 부른다.
Bubbling(버블링)
<body>
<div id="container">
<button>Click me!</button>
</div>
<pre id="output"></pre>
</body>const output = document.querySelector("#output");
function handleClick(e) {
output.textContent += `You clicked on a ${e.currentTarget.tagName} element\n`;
}
const container = document.querySelector("#container");
const button = document.querySelector("button");
document.body.addEventListener("click", handleClick);
container.addEventListener("click", handleClick);
button.addEventListener("click", handleClick);body, container, button 모두 click event를 가지고 있는데, 버튼을 클릭하면
You clicked on a BUTTON element
You clicked on a DIV element
You clicked on a BODY element
자식부터 부모 순으로 이벤트가 발생하는데
이를 비눗방울이 떠오르는 것처럼 표현하여 bubbling이라 말한다.
버블링을 강제로 중단시키고 싶다면, event.stopPropagation()을 이용하면된다. 하지만 꼭 필요한 경우가 아니라면 사용하지 않는 것이 좋다.
capturing은 실무에서 거의 쓰이지 않기 때문에 간단하게만 알아두자
addEventListener의 기본 동작은 버블링이고,
캡처링을 사용하려면 이벤트 리스너의 세번째 인자로 true 를 전달해야한다.
그럴 경우 아래 그림과 같이 Capturing → Target → Bubbling 순으로 실행된다.
