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 문서에 따르면 가장 권장되는 방식이라고 한다.
  • 실제로도 사용 방법이 가장 편리하고, 여러 기능적 장점이 있는듯 하다.
    1. 한 이벤트에 여러개의 이벤트 핸들러를 추가할 수 있다.
    2. HTML 요소뿐 아니라 모든 XML, SVG등 모든 DOM요소에 대해 동작한다고 한다.
    3. 캡쳐링과 버블링을 지원한다. (세번째 파라미터)
• 그 밖에도 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)