Introduction to events - Learn web development | MDN
Event handling (overview) - Event reference | MDN
브라우저 이벤트 소개
1. What is an event?
- 일반적인 의미로, 이벤트란 우리가 프로그래밍하고 있는 시스템에서 발생하는 ‘일들things’을 말한다.
- 브라우저에서 이벤트란, browser window 안에서 발생(fired)한 신호(signal)로서, 브라우저나 operating system environment에서 발생한 변화를 알려주는 역할을 한다.
- 프로그래머는 이벤트 발생(fire)시 작동할 event handler 코드를 작성하여 웹 페이지가 변화에 대해 반응하도록 할 수 있다.
- (예를들면 addEventListener 함수를 지정하여 특정 이벤트에 대한 핸들러를 작성할 수 있다)
- 브라우저에서, 이벤트가 일어나는 주체는 다양하다. single element, a set of elements, the HTML document loaded in the current tab, or the entire browser window등.
- 또한 이벤트의 종류도 다양하다. 예를들면..
- user selects, clicks, hovers, etc.
- user chooses a key on the keyboard
- user resizes or closes the browser window
- a web page finishes loading
- a form is submitted
- a video is played, paused, or ends
- an error occurs
- 앞서 설명했듯, 이벤트에 반응하기 위해서는 해당 이벤트에 대한 event handler/listener를 등록해야 한다.
- 핸들러와 리스너의 차이를 엄밀히 말하면 다음과 같다
- The listener listens out for the event happening, and the handler is the code that is run in response to it happening.
- 하지만 보통 둘이 따로 일어나는 것은 아니다. 둘은 같이 작동한다.
- events는 JavaScript 언어의 코어 일부분은 아니다. events는 브라우저의 Web APIs에 정의되어 있기 때문이다.
- 따라서 예를들면 브라우저와 Node.js는 서로 다른 이벤트 모델을 가지고 있을 수 있다.
2. handling events
- 가장 많이 쓰는 방법은
addEventListener를 사용하는 방법일 것이다.
- MDN 문서에 따르면 가장 권장되는 방식이라고 한다.
- 실제로도 사용 방법이 가장 편리하고, 여러 기능적 장점이 있는듯 하다.
- 한 이벤트에 여러개의 이벤트 핸들러를 추가할 수 있다.
- HTML 요소뿐 아니라 모든 XML, SVG등 모든 DOM요소에 대해 동작한다고 한다.
- 캡쳐링과 버블링을 지원한다. (세번째 파라미터)
- 그 밖에도 HTML attribute로 하는 방법(onclick attribute), 그리고 DOM 프로퍼티 방식(e.g.
btn.onclick = function () {…})이 있다.
- 자세한 내용은 4. 이벤트 핸들러 등록 (방법 3가지)
3. Event object
- 이벤트 핸들러 함수의 매개변수로 이벤트 객체가 넘겨진다는 것을 알 것이다. 이벤트 객체에 대해 더 자세히 알아보자.
- Event 객체는 이벤트가 발생하면 브라우저가 자동으로 생성하는 객체이다.
- 이벤트 객체는 자동으로 해당 이벤트 핸들러에게 넘겨지며, 발생한 이벤트에 대한 상세정보와 추가 기능을 제공하는 역할을 한다.
examples - Event properties
- 이벤트 객체의 몇몇 프로퍼티들에 대해 알아보자.
event.type
- 어떤 이벤트인지를 알려준다. 예를들면 “click”
event.target
- 이벤트가 발생한 가장 안쪽의 요소, 즉 실제로 이벤트가 발생한 요소라고 볼 수 있다.
event.currentTarget
examples - Event methods (features)