[Web/JS] 자바스크립트 - DOM을 이용한 이벤트 처리기

✏️ 이벤트 알아보기

https://pooreumjung.tistory.com/421

[Web/JS] 자바스크립트 - 이벤트와 이벤트 처리기

✏️ DOM

위의 게시물에서는 이벤트 처리기를 지정하는 방법은 HTML이 주인이 되어 자바사크립트 함수를 불러와서 사용한다고 언급했었습니다. 하지만 DOM을 사용하게 되면 자바스크립트가 주인이 되어 HTML 요소를 가져와서 이벤트 처리기를 연결합니다. 즉 HTML과 자바스크립트 중 어느 쪽을 중심으로 잡는가에 따라서 지정하는 방법이 달라질 수 있습니다. 기본형 => 웹 요소.onclick = 함수;

자바스크립트에서는 웹 요소를 여러 방법으로 가져올 수 있는데 그중에서 함수 querySelector()를 사용하여 가져오는 것이 쉬운 방법입니다. querySelector() 괄호 안에는 클래스 이름이나 id, 또는 다양한 선택자를 넣을 수 있습니다.

✏️ 예제

다음은 id="change"인 버튼을 클릭했을 때 글자색을 바꾸는 예제입니다. 

<button id="change">글자색 바꾸기</button>	
<p>Reprehenderit tempor do quis sunt eu et exercitation deserunt. Laboris adipisicing est sint aliquip nulla pariatur velit irure elit qui id. Dolore aliquip dolore eu ut irure sint Lorem reprehenderit velit. Duis veniam irure cillum anim excepteur culpa pariatur sunt esse. Eu nulla commodo velit ex id dolore incididunt mollit incididunt nisi labore culpa qui ea. Commodo veniam veniam in ipsum ad minim occaecat qui pariatur adipisicing laborum quis.</p>

// 방법 1 : 웹 요소를 변수로 지정 & 미리 만든 함수 사용
var changeBttn = document.querySelector("#change");
changeBttn.onclick = changeColor;

function changeColor() {
   document.querySelector("p").style.color = "#f00";
}

// 위에서 언급했던 querySelector()를 사용해 버튼 요소를 가져오고 변수 changeBttn에 저장합니다. 그리고 changeBttn에 onclick을 사용해 changeColor() 함수를 연결합니다. 
// 이때는 함수의 이름만 사용하고 ()를 붙이지 않아야 합니다.

// 방법 2 : 웹 요소를 따로 변수로 만들지 않고 사용
document.querySelector("#change").onclick = changeColor;

function changeColor() {
  document.querySelector("p").style.color = "#f00";
}

// 조금 더 다른 방식으로도 표현할 수 있는데 웹 요소를 프로그램 안에서 여러 번 사용하지 않는다면 변수에 할당하지 않고 직접 사용할 수 있습니다.

//방법 3 : 직접 함수를 선언
document.querySelector("#change").onclick = function() {
  document.querySelector("p").style.color = "#f00";
};

// 또는 함수를 딱 한 번만 사용한다면 changeColor함수 이름이 들어갔던 자리에 직접 함수를 선언할 수도 있습니다.