Events

무언가를 클릭하면 그것이 event가 되고, <h1>태그 위로 마우스를 올려도 event가 된다. → 다양함

이러한 모든 event들을 Js는 listen할 수 있다.

그렇다면 event를 어떻게 listen할까? : addEventListener

 

이런 코드를 입력하면, Js는 title을 지켜보다가 누군가가 title을 click하는 것을 listen할것이다.

 click event를 listen한다는 뜻이다.

누군가가 title을 click했을 때 어떤 일이 발생하도록 하기 위해 handleTitleClick이라는 function을 정의했다.

title을 click하면 ""안의 문장을 출력하는 함수

그리고 이 함수를 addEventListener()에 두 번째 argument(인수)로 전달하게 했다.

→ handleTitleClick(); 으로 함수를 직접 호출하지 않고 누군가가 title을 click할 경우에 Js가 실행버튼을 대신 눌러주게 만들었다.

그런 다음 웹에서 hello라는 id를 가진 Grab me! 를 클릭하면 handleTitleClick 함수가 실행되는 것을 확인할 수 있다.

클릭한 후 console창에 출력된 문장

함수의 내용을 바꿔서 click했을 때 title의 color를 바꾸는 것도 가능하다.

click 후 글자의 색이 변경되었다.

 

우리는 Js를 통해서 다양한 event들을 실행할 수 있기 때문에, 어떤 event를 사용할 것인지 정확하게 파악해야 한다.

 

내가 listen하고 싶은 event를 찾는 방법

1. 구글에 찾고 싶은 element의 이름을 검색한다. ex) h1 html element mdn (h1이라는 html 요소를 mdn 사이트에 검색)

2. 검색 결과 중 링크에 Web APIs라는 문장이 포함된 사이트를 찾는다.

3. 사이트에 들어가서 원하는 event를 찾는다.

 

위의 과정이 귀찮다면 

1. console.dir을 통해서 element를 console에 출력시킨다.

2. console창에 수많은 property가 출력되는데, 여기서 사용 가능한 event를 찾을 수 있다.

다양한 property들이 출력됨

그 중 원하는 것

property 이름 앞에 on이 붙어있다면, 그것이 바로 event listener이므로 만약 onclick event를 사용한다면 onclick이 아닌 click으로 사용해야 한다.

 

 

event를 찾는 방법을 알았으니 이제 mouseenter라는 event를 추가해보자.

(함수 이름을 저렇게 설정해야 무엇을 하는 함수인지 쉽게 이해할 수 있어서 좋다.)

새로고침 후 Grab me!라는 title에 마우스를 올렸다 내렸다 하면 이렇게 console창에 출력되는 것을 확인할 수 있다.

 

mouseleave 이벤트 추가 & mouseenter 이벤트 변경

마우스를 title 위에 올렸을 때

마우스를 title 위에서 뗏을 때