JavaScript : Event

• event

무언가 일어났다는 신호, 사건

모든 DOM 요소는 이러한 이벤트를 만들어내고 이벤트가 발생하면 event 객체가 생성된다.

 

• event handler

이벤트가 발생했을 때 실행되는 함수

 

• .addEventListener ( type, handler )

대표적인 이벤트 핸들러 중 하나

특정 이벤트를 DOM 요소가 수신할 때마다 콜백 함수를 호출

 

• addEventListener 의 인자

type : 수신할 이벤트 이름, 문자열로 작성한다.

handler : 발생한 이벤트 객체를 수신하는 콜백 함수, 발생한 이벤트 객체를 유일한 매개변수로 받고 반환 값이 없다.

 

• 버블링

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러까지 동작하는 현상

가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.

 

• currentTarget 속성

항상 이벤트 핸들러가 연결된 요소만을 참조한다. = ‘this’

 

• target 속성

실제 이벤트가 발생한 요소를 참조한다.

 

• lodash

모듈성, 성능 및 추가 기능을 제공하는 자바 스크립트 유틸리티 라이브러리

array, object 등 자료구조를 다룰 때 사용하는 유용한 함수들을 제공

 

• .preventDefault( )

해당 이벤트에 대한 기본 동작을 실행하지 않도록 지정

ex) form 요소의 제출 이벤트나, a 요소를 클릭할 때의 이벤트를 취소하여 페이지 새로고침, 이동을 막을 수 있다.

 

• addEventListener 에서의 화살표 함수 주의사항

화살표 함수는 자신만의 this 를 가지지 않기 때문에 자신을 포함하고 있는 함수의 this 를 상속받는다. addEventListener 에서 this 를 사용하여 요소를 지정하고 싶다면 일반 함수로 사용하자