[JavaScript] click event 실행

 body 태그 내부에 h1.title 작성

<h1 class="title">Click me!</h1>

 

클래스이름으로 요소를 찾아 변수에 저장

const title = document.getElementsByClassName("title")[0];

 

클릭 이벤트가 일어나면 실행될 코드를 함수 내부에 작성

function handleTitleClick(){
    alert("title was clicked!");
}

 

클릭 이벤트를 실행하는 첫 번째 방법

HTML element 를 가져와 addEventListener() 를 실행

// HTML요소.addEventListener(type, 실행할 함수);
title.addEventListener("click", handleTitleClick);

addEventListener(): 말그대로 사용자가 type 으로 작성한 이벤트를 실행하면 listen하는 함수

 

handleTitleClick 를 실행할 함수로 작성할 때, () - 소괄호를 작성하지 않는 이유는

함수를 JavaScript에 넘겨주고 유저가 title을 클릭하는 이벤트가 일어나면 대신 실행하게하기위함(소괄호는 실행버튼이라고 생각하면됨)

 

// addEventListner()로 추가한 이벤트 제거
title.removeEventListner("click", handleTitleClick);

 

클릭 이벤트를 실행하는 두 번째 방법

HTML element 에 '.on이벤트명' 작성

title.onclick = handleTitleClick;

 

 

+

해당 HTML element에 적용할 수 있는 이벤트를 알아보려면

1. 구글링

찾고 싶은 element의 이름(예 h1 HTML element mdn)과 Web APIs 라는 단어가 포함된 페이지를 찾아 확인

 

2. 콘솔창

console.dir(HTML요소);

 콘솔창에서 on으로 시작하는 이벤트들을 type에 'on'을 제외한 단어를 작성하여 적용