javascript

Event

Posted by Seongkyun Yu on 2020-03-31
Estimated Reading Time 2 Minutes
Words 479 In Total
Viewed Times

1. 이벤트란

브라우저에 특정 사건이 발생하면 이를 감지하여 내보내 주는 것.

이벤트 발생시 처리할 함수를 등록시켜 상호작용 하는 것을 이벤트 드리븐 프로그래밍이라고 한다.


2. 이벤트 타입

  • 마우스: click, dbclick, mousedown, mouseup, mousemove, mousenter, mouseleave

  • 키보드: keydown, keyup, keypress

  • 포커스: focus, blur

  • 폼: submit, reset

  • 값 변경: input, change, readystatechange

  • DOM 뮤테이션: DOMContentLoaded

  • 뷰: resize, scroll

  • 리소스: load, unload, abort, error



3. 이벤트 핸들러 등록

이벤트가 생겼을때 작동할 함수를 등록해야 한다.

3.1 이벤트 핸들러 어트리뷰트

eventAttribute
1
<button onclick="sayHi('Lee')">Click me!</button>

어트리뷰트로 작성했지만 내부적으로 다음과 같이 함수를 만든다

1
2
3
function onclick(event) {
  sayHi("Lee");
}

3.2 이벤트 핸들러 프로퍼티

eventProperty
1
2
3
$button.onclick = function () {
  console.log("button click");
};

이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러 만을 바인딩할 수 있다는 단점이 있다.


3.3 addEventListener 메소드

eventAddEventListener
1
2
3
$button.addEventListener("click", function () {
  console.log("button click");
});

여러개의 이벤트 처리 함수를 등록할 수 있다.

등록한 순서대로 동작한다.(중복시 하나만 등록)


4. 이벤트 핸들러 제거

deleteEvent
1
2
3
4
5
// addEventListener로 등록한 함수 제거
$button.removeEventListener("click", handleClick);

// 프로퍼티로 등록한 함수 제거
$button.onclick = null;

addEventListener로 등록한 이벤트를 제거한다.

삭제할 함수는 등록된 함수와 동일한 참조를 가져야 하므로 무명 함수는 삭제가 불가하다.

프로퍼티 방식의 경우 null을 할당해 제거한다.



5. 이벤트 전파

  • 캡처링 단계: 이벤트가 상위 요소에서 하위 요소 방향으로 전파

  • 타깃 단계: 이벤트가 이벤트 타깃에 도달

  • 버블링 단계: 이벤트가 하위 요소에서 상위 요소 방향으로 전파


이벤트 핸들러는 기본적으로 타깃 단계와 버블링 단계의 이벤트를 캐치함.


5.1 캐치 가능한 영역

  • 이벤트 핸들러 어트리뷰트/프로퍼티: 타깃, 버블링만 캐치 가능

  • addEventListener: 모두 캐치 가능, 선별적 캐치 가능



6. 이벤트 위임

이벤트를 자식요소에서 캐치하지 않고 부모가 캐치하는 것.

버블링이 일어나지 않는 이벤트의 경우 위임할 수 없다.



7. 기본 동작 변경

7.1 기본 동작 중단

stopDefault
1
2
3
4
document.querySelector("a").onclick = (e) => {
  // a 요소의 기본 동작을 중단한다.
  e.preventDefault();
};

7.2 이벤트 전파 방지

stopPropagation
1
2
3
4
5
6
// btn2 요소는 이벤트를 전파하지 않으므로 상위 요소에서 이벤트를 캐치할 수 없다.
document.querySelector(".btn2").onclick = (e) => {
  // 이벤트 전파 중단
  e.stopPropagation();
  e.target.style.color = "blue";
};

8. 이벤트 핸들러 내부의 this

  • 어트리뷰트 방식: window

  • 프로퍼티, addListener: 바인딩한 DOM 요소



9. 커스텀 이벤트 생성 및 디스패치

customEvent Create
1
2
3
// KeyboardEvent 생성자 함수로 keyup 이벤트 타입의 커스텀 이벤트 객체를 생성
const keyboardEvent = new KeyboardEvent("keyup");
console.log(keyboardEvent.type); // keyup
customEvent Dispatch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<body>
  <button class="btn">Click me</button>
  <script>
    const $button = document.querySelector('.btn');

    // click 커스텀 이벤트 핸들러 등록
    // 커스텀 이벤트를 디스패치하기 이전에 이벤트 핸들러를 등록해야 한다.
    $button.addEventListener('click', e => {
      console.log(e);
      // MouseEvent {isTrusted: false, screenX: 0, screenY: 0, clientX: 0, ...}
      e.target.textContent = 'Clicked!';
    });

    // 커스텀 이벤트 생성
    const customEvent = new MouseEvent('click');

    // 커스텀 이벤트 디스패치(동기적)
    $button.dispatchEvent(customEvent);
  </script>
</body>
</html>

새로운 이벤트 타입의 경우 이벤트 핸들러 등록은 반드시 addEventListener 방식을 사용해야 한다.


참고자료: poiemaweb.com

If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !

FEATURED TAGS
javascript
FRIENDS
ESC