자바스크립트 (13) - 리스닝 가능한 이벤트 찾기

리슨 하고 싶은 event 를 찾는 가장 좋은 방법은,

구글에 찾고 싶은 태그 그리고 그 뒤에  html element mdn을 붙여 구글링 해보느 ㄴ것이다.

ex) h1 html element mdn

 

그리고 구글페이지에 web apis 라는 문장이 포함된 페이지를 찾는다. 

 

element 를 보면 event 들을 찾을 수 있다. 

감지할 수 있는게 엄청 많다.

 

하지만 이게 귀찮다면

 

console.dir("element") 이렇게

 

다큐먼트 엘리먼트 속성을 가지고 있는 element 를

콘솔 dir 하면 수많은 프로퍼티들을 출력한다. 

 

사용가능한 event 들은 여기서 찾을 수 있다. 

 

property 앞에 on이 붙어있다면 이벤트 리스너이다.

이벤트를 사용하고 싶다면 on을 떼고 뒷부분만 사용해야한다. 

 

const title = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
    title.style.color ="blue";
 }
function handleMouseEnter(){
    title.innerText = "Mouse is here!";
} 
function handleMouseLeave(){
    title.innerText = "Mouse is gone!";
} 

 title.addEventListener("click", handleTitleClick);
 title.addEventListener("mouseenter", handleMouseEnter);
 title.addEventListener("mouseleave", handleMouseLeave);

 

 

사실 지금하고있는건 자스로 css 바꾸기이다. 잘못된건 없다.

 

하지만 원칙적으로 css가 스타일을 바꾸는게 옳다.