<JAVASCRIPT> JS에서 이벤트란? 이벤트 리스너?

 

 

흨흨... 기본적인 부분일텐데 숙지가 안되어있어서 다시 정리한다. 

 

 

내가 생각하는 js의 이벤트란 '트리거를 건드리면 발생하는 어떤 기능' 이라고 생각했는데 정확한 정의에 대해서 알아보자

 

JAVASCRIPT 에서 이벤트란? 

- 이벤트(event)란 웹 브라우저가 알려주는  HTML 요소에 대한 사건의 발생을 의미한다.

 

 

오.... 그럼 이벤트는 어떻게 만들지??

에 대한 답은 이벤트 리스너 인 것 같다.

 

 

 

이벤트 리스너란?

- 이벤트가 발생했을때 그 처리를 담당하는 함수를 가리킨다. 이벤트 핸들러라고도 한다.

그리고 이벤트 리스너는 먼저 객체나 요소에 등록되어야 호출 할 수 있다.

 

 > 사용방법

1. 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록하기

2. 객체나 요소의 메서드에 이벤트 리스너를 전달하는 방법

 

 

 

예를 들면 다음과 같다

 

사용방법 1의 예시

<a onclick = "alert('버튼이 눌렸습니다')"> 여기를 클릭해 보세요</a>

 

html 태그에 onclick 으로 이벤트를 등록했다.

 

 

 

사용방법 2 객체나 요소의 메소드에 리스너를 전달하려면 아래의 메소드를 사용해야한다.

1. addEventListener()
=> 이벤트대상객체.addEventListener( 이벤트 명, 실행할 이벤트 리스너, 이벤트 전파방식)
2. attachEvent()

 

 

예시2

 

const redBtn = document.querySelector("h1");

redBtn.addEventListener(등록할이벤트, 함수이름)

 

이렇게 써주면 된다.  h1 태그를 지정해 놓은 redBtn 이 click이라는 이벤트가 일어났을 때 이걸 감지해서 두번째 인수로 넣어준 함수를 실행시켜준다.

 

+)  addEventListener() vs attachEvent() 의 차이점?

 

attachEvent는 나도 처음 봤는데 IE 10이하 버전에서 쓰던 함수라고 한다.

attachEvent => addEventListener 로 대체 되었다고 한다.