DOM에서 이벤트 처리하기

1. DOM 요소에 함수 직접 연결

 

var btn = document.querySelector("#btn");
btn.onclick = function(){
    alert('버튼을 클릭했습니다.');
}

 

 

 

2. 함수 이름을 사용해 연결

 

var btn = document.querySelector("#btn");
btn.onclick = btnHandler;

function btnHandler(){
	btn.style.color = "red";
}

 

✅ event 객체에는 이벤트 정보만 들어있음, 만약 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this를 사용해야 함

 

var card = document.querySelector("#card");
card.onclick = function(event){
	alert("클릭한 이미지 파일 : " + this.src);
}

 

 

 

 

 

3. addEventListner()

→ 한 요소에 여러 이벤트 처리기를 연결해 실행 가능

 

요소.addEventListener(이벤트, 함수, 캡처 여부);

 

이벤트 : 이벤트 유형(단, on을 붙이지 않고 click, keypress 형태로 사용한다)
함수 : 이벤트가 발생하면 실행할 명령이나 함수를 지정
캡처 여부 : 이벤트를 캡처하는지 여부를 지정(이벤트 캡처링 : DOM의 부모 노드에서 자식 노드로 전달)

 

 

 

 

 

4. CSS 속성에 접근

document.요소명.style.속성명