- 들어가기 전에
어떤 영역을 마우스 클릭하거나, 화면을 스크롤하거나 하는 작업에 따라서 브라우저는 반응한다. 이런 것들을 모두 브라우저가 Event 기반으로 동작되게 만들어졌기 때문이다. 다양한 Event를 알아보면서 웹프론트엔드 개발을 이해해보자.
- 학습 목표
1. Event listener 무엇인지 이해해보자.
2. Event 객체를 사용해보자.
- 핵심 개념
- Event listener
- addEventListener
- event object
- Event
- 브라우저에는 많은 이벤트가 발생한다. 브라우저 화면의 크기를 마우스로 조절할 때도, 스크롤을 할 때도, 마우스로 이동하거나 무언가를 선택할 때도 이벤트가 발생한다.
- 이벤트를 브라우저가 발생시켜주니, 우리는 그때 어떤 일을 하라고 할 일을 등록할 수 있다. 다시 말해, HTML 엘리먼트별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때 특정 행위(어떤 일)를 하고싶다면, 대상 엘리먼트를 찾고 어떤 일을 등록하면 된다. 그것을 자바스크립트로 구현할 수 있다.
- 이벤트 등록
- addEventListener 함수를 사용할 수 있다. addEventListener는 element 객체 아래에 있는 메서드. 어떤 element를 찾고, 이벤트가 일어나면 코드로 브라우저가 모든 것을 알려주는데 클라이언트는 알려주는 정보들 중 선택적으로 이벤트 등록을 미리 해둘 수 있다.
- addEventListener 함수의 두번째 인자는 함수이다. 이 함수는 나중에 이벤트가 발생할 때 실행되는 함수로, 이벤트 핸들러(Event Handler) 또는 이벤트 리스너(Event Listener)라고 한다. 콜백함수는 이벤트가 발생할 때 실행된다.
<html> <body> <div id="outside">outside element</div> </body> <script src="test.js"></script> </html> | cs |
- 이벤트 객체
- 브라우저는 이벤트 리스너를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는 지에 대한 정보를 담은 이벤트 객체를 생성해서 리스너 함수에 전달한다.
- 따라서 이벤트리스너 안에서는 이벤트객체를 활용해서 추가적인 작업을 할 수 있게 된다.
- 가장 많이 쓰이는 것은 event.target 인데, 이것은 이벤트가 발생한 element를 가리킨다. element도 객체이므로 안에 nodeName이나 classname과 같이 element가 가진 속성을 사용할 수 있다.
'Progamming > BoostCourse' 카테고리의 다른 글
| JavaScript Debugging (0) | 2019.01.20 |
|---|---|
| Ajax 통신의 이해 (0) | 2019.01.20 |
| DOM과 querySelector (0) | 2019.01.20 |
| window 객체 (setTimeout) (0) | 2019.01.20 |
| 자바스크립트 함수 호출 스택 (0) | 2019.01.20 |
댓글