DOM을 이용하여 이벤트 처리기를 지정하면 태그와 자바스크립트 소스를 분리해서 사용할 수 있음. 자바스크립트에서는 웹 요소를 여러 방법으로 가져올 수 있는데 그 중에서 함수 querySelector() 를 사용. querySelector() 의 괄호 안에는 클래스 이름이나 id 이름 또는 다양한 선택자를 넣을 수 있음.
웹 요소.onclick = 함수;
버튼 클릭해서 글자색 바꾸기
방법 ① 웹 요소를 변수로 지정 & 미리 만든 함수 사용
...
<button id="change">글자색 바꾸기</button>
<p>오리온 무뚝뚝 감자칩 통후추소금맛</p>
...
var changeBtn = document.querySelector("#change");
changeBtn.onclick = changeColor; //changeColor함수 뒤에 () 없음!!
function changeColor() {
document.querySelector("p").style.color="#ff99fc";
}
...방법 ② 웹 요소를 따로 만들지 않고 사용
...
document.querySelector('#change').onclick = changeColor;
function changeColor() {
document.querySelector("p").style.color = "#ff99fc";
}
...방법 ③ 함수를 직접 선언
...
document.querySelector("#change").onclick = function() {
document.querySelector("p").style.color = "#ff99fc";
};
...
