Web Event Interface

Creator

Creator

Seonglae Cho

Created

Created

2021 Apr 5 10:46

Editor

Editor

Seonglae Cho

Edited

Edited

2022 Feb 23 3:23

Refs

Refs

Event Driven Model

웹 애플리케이션에서 사용자의 입력을 받기 위해서는 이벤트 등록을 하게 된다

이 이벤트를 감지하는 방식 두 가지가 버블링과 캡쳐

Web Event Interface Children

Web stopPropagation

WindowEventHandlers

IntersectionObserver API

Web EventSource

JS EventEmitter

Web EventTarget

Event Types

이벤트 참조 | MDN

DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가적인 커스텀 필드 또는 함수를 가질수도 있습니다. 이벤트는 렌더링 모델에서 기본적인 사용자 인터렉션부터 발생한 것에대한 자동 알림까지 모든 것을 나타낼 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/Events

Event to parent, not node

Avoid too many events & Event Delegation - Working w Browser Events - Udacity FrontENDev

Instantly share code, notes, and snippets. Avoid too many events & Event Delegation - Working w Browser Events - Udacity FrontENDev You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session.

Avoid too many events & Event Delegation - Working w Browser Events - Udacity FrontENDev

https://gist.github.com/desinas/3f9aea1317eea217028f4575d042a62d

Avoid too many events & Event Delegation - Working w Browser Events - Udacity FrontENDev

JavaScript Event KeyCodes

Keycode testing tool - which keys map to which keycodes?

JavaScript Event KeyCodes

https://keycode.info/

이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지

얼마 전 Vanilla JS로 꽤 복잡한 웹 애플리케이션을 구현할 일이 생겨 오랜만에 순수 자바스크립트를 들여다보게 되었습니다. 구현 과정에서 이벤트 캡쳐와 버블링에 대해 정확히 지식이 정리가 되어 있지 않다는 것을 깨닫고 아래와 같이 정리하게 되었네요. 브라우저에서 어떻게 특정 화면 요소의 이벤트를 감지하는지 그리고 그 이벤트를 어떻게 다른 화면 요소에 전파하는지 같이 알아보겠습니다.

이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지

Recommendations

//////////