[JavaScript] .addEventListener

.addEventListener

이벤트가 발생했을때 함수를 실행하는 메소드

 

예제)

브라우저에서 글씨를 클릭하는 이벤트가 발생할때 글씨색깔을 변경해보자!

// HTML
<h1>Try This</h1>

// JavaScript
const title = document.query.Selector("#title");
const BASE_COLOR = "red";
const OTHER_COLOR = "blue";

function handleCLick() {
    const currentColor = title.style.color;
    if (currentColor === BASE_COLOR){
        title.style.color = OTHER_COLOR;
    } else {
        title.style.color = BASE_COLOR;
    }
}

function init() {
    title.style.color = "BASE_COLOR";
    title.addEventListener("click", handleCLick);
}
init();