[JavaScript] Event Listener, 자바스크립트의 진짜 역할addEventListener()

event를 listen 한다.

listening for event

 

event : 클릭을 하거나, 커서가 위로 올라가거나, 입력을 끝내거나, enter를 누르는 것, 와이파이 연결이 끊기는 것 까지도

 

JavaScript에서는 이러한 Event 들을 Listen 할 수 있다.

 

addEventListener()

const title = document.querySelector(".hello h1");

title.addEventListener("click")

자바스크립트는 누군가가 title 을 click 하는 것을 Listen 하게 된다.

 

const title = document.querySelector(".hello h1");

function handleTitleClick() {
  console.log("Title was clicked");
}
title.addEventListener("click", handleTitleClick);

두번째 인자로는 eventd 에 대한 처리를 넣어주면 된다. 위에서는 함수를 선언해서 넣어주었다.

 

함수를 실행할때에는 '함수명()' 의 형태를 띄었다.

 

하지만 addEventListenr의 두번째 인자에 들어있는 함수에는 뒤의 소괄호가 없다

 

왜일까?

 

그것은 바로 곧장 실행시키는 것이 아니기 때문이다.

 

자바스크립트에는 이름만 넘겨 내가 누르는 것이 아닌 클릭 이벤트가 발생했을때 자바가 대신 실행해 주게끔 한 것이다.

두 괄호를 통해서 실행을 시켰던 것(=실행버튼을 눌렀던 것과 동일한 결과)을 기억하면 될듯 하다.

이걸 통해 웹사이트에서 click event를 감지하는 방법을 깨달았다. (굳이 버튼이 아니어도 되고)

 

별도로

(이벤트리스너를 생성해주고 싶은 대상) 엘리먼트.addEventListener("click", 함수명)

으로 첫번째 인자로 listen 할 event를 정해줄 수도 있지만

(이벤트리스너를 생성해주고 싶은 대상) 엘리먼트.onclick(함수명) 과 같이

 

on이벤트명 으로도 EventListener를 생성해 줄 수 있다.

 

 

결국 자바스크립트의 핵심은

 

1. element를 HTML에서 찾아오고

2. 그 element에 event listener를 추가하고

3. 클릭,입력,엔터 할때 그 event를 listen 해주고 그에 대한 반응을 해줄 것이다.