[기본 개념] 3 | (1.2) DOM 에서 이벤트 처리하기

[기본 개념] 3 | (1.2) DOM 에서 이벤트 처리하기

1 문서 객체 모델 (DOM)

2 DOM 요소에 접근, 속성 가져오기

3> DOM 에서 이벤트 처리하기

4 DOM 에서 노드 추가, 삭제하기

3 DOM 에서 이벤트 처리하기

DOM 요소에 함수 직접 연결하기

 

 이벤트 처리기 함수가 간단하면 DOM 요소에 직접 연결할 수 있다. 

 

(ex. 이미지를 클릭하면 알림 창 표시하기)

 

...
  <img src="images/cup.png" id="cup">
  ...
<script>
  var cup = document.querySelector("#cup");  // id="cup" 요소를 가져옴
  cup.onclick = function() {
    alert("이미지를 클릭했습니다.");
  }
</script>
...

 

함수 이름을 사용해 연결하기

 

 이벤트가 발생했을 때 실행 함수를 정의해 놓았다면 함수 이름을 사용해 연결할 수 있다. 이 경우 함수 이름 다음 괄호(( )) 를 추가하지 않는다.

 

(ex. 이미지를 클릭하면 함수 실행하기)

 

...
  <img src="images/cup.png" id="cup">
  ...
<script>
  var cup = document.querySelector("#cup");  // id="cup" 요소를 가져옴
  cup.onclick = changePic;
  
  function changePic( ) {
    cup.src = "images/cup-1.png";	    // cup 요소의 경로를 다른 이미지 경로로 바꿈
  }
</script>
...

 

DOM 의 event 객체

 

 DOM 에는 이벤트 정보를 저장하는 event 객체가 있다. 여기서 event 객체를 함수의 인수로 사용한다.

 

(ex. 이미지에서 클릭한 위치 알아내기)

 

...
  <img src="images/cup.png" id="cup">
  ...
<script>
  var cup = document.querySelector("#cup");  // id="cup" 요소를 가져옴
  cup.onclick = function(event) {
    alert("이벤트 유형 : " + event.type + ", 이벤트 발생 위치 : " 
    + event.pageX + ", " + event.pageY);
  }
</script>
...

 

event 객체의 주요 프로퍼티와 메서드

 

구분		설명
프로퍼티	altKey	이벤트가 발생했을 때 Alt 를 눌렀는지 여부를 boolean 값으로 반환
	button	마우스에서 누른 버튼의 키값을 반환
	charCode	keypress 이벤트가 발생할 때 어떤 키를 눌렀는지 유니코드 값으로 반환
	clientX	이벤트가 발생한 가로 위치를 반환
	clientY	이벤트가 발생한 세로 위치를 반환
	ctrlKey	이벤트가 발생했을 때 Ctrl 를 눌렀는지 여부를 boolean 값으로 반환
	pageX	현재 문서 기준으로 이벤트가 발생한 가로 위치를 반환
	pageY	현재 문서 기준으로 이벤트가 발생한 세로 위치를 반환
	screenX	현재 화면 기준으로 이벤트가 발생한 가로 위치를 반환
	screenY	현재 화면 기준으로 이벤트가 발생한 세로 위치를 반환
	shiftKey	이벤트가 발생할 때 Shift 를 눌렀는지 여부를 boolean 값으로 반환
	target	이벤트가 최초로 발생한 대상을 반환
	timeStamp	이벤트가 발생한 시간을 반환
	type	발생한 이벤트 이름을 반환
	which	키보드와 관련된 이벤트가 발생할 때 키의 유니코드 값을 반환
메서드	preventDefault( )	이벤트를 취소할 수 있는 경우에 취소

 

 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this 를 사용해야 한다.

 

(ex. this 예약어 사용하기)

 

...
  <img src="images/card.png" id="card">
  ...
<script>
  var card = document.querySelector("#card");
  card.onclick = function(event) {
    alert("클릭한 이미지 파일 : " + this.src);
  }
</script>
...

 

addEventListener( ) 메서드 사용하기

 

기본형

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

 

이벤트 이벤트 유형을 지정, on 을 붙이지 않고 씀

 

함수 이벤트가 발생하면 실행할 명령이나 함수 지정, 함수 정의할 때 event 객체를 인수로 받음

 

캡처 여부 이벤트를 캡처하는지 여부를 지정, 기본값은 false 이고, true 이면 캡쳐링 false 이면 버블링

이벤트 캡처링 : DOM 부모 노드에서 자식 노드로 전달

이벤트 버블링 : DOM 자식 노드에서 부모 노드로 전달

 

 addEventListener( ) 메서드와 event 객체를 사용하면 한 요소에 여러 이벤트 처리기를 연결해 실행할 수 있으며 끝에 세미콜론(;) 을 꼭 붙여야 한다.

 

(ex. 마우스 포인터를 올리면 이미지 바꾸기)

 

...
  <img src="images/easys.jpg" id="cover">	
  ...
<script>
  var cover = document.getElementById("cover");
  cover.addEventListener("mouseover",changePic, false);
  cover.addEventListener("mouseout",originPic, false);
    
  function changePic() {
    cover.src = "images/easys-1.jpg";
  }
  function originPic() {
    cover.src = "images/easys.jpg";
  }
</script>
...

 

 따로 다른 곳에서 사용하는 함수가 아니라면 메서드 안에 함수 표현식으로 사용하는 경우가 많다. 이때 함수명은 제외한다.

 

(ex. 메서드 안에서 함수 선언하기)

 

...
  <img src="images/easys.jpg" id="cover">	
  ...
<script>
  var cover = document.getElementById("cover");
  cover.addEventListener("mouseover",function() {
    cover.src = "images/easys-1.jpg";
  });
  cover.addEventListener("mouseout", function() {
    cover.src = "images/easys.jpg";
  });  
</script>
...

 

CSS 속성에 접근하기

 

기본형

document.요소명.style.속성명

 

 CSS 속성에 접근하려면 해당 스타일이 적용된 HTML 요소 다음에 예약어 style 을 쓰고 속성을 적는다.

 

 중간에 하이픈(-) 이 있는 속성은 두 단어를 합쳐서 사용한다.

 

(ex. 도형의 테두리와 배경색 바꾸기)

 

...
  <div id="rect"></div>
  ...
<script>
  var myRect = document.querySelector("#rect");
  myRect.addEventListener("mouseover", function() {  // 마우스 포인터를 올리면
    myRect.style.backgroundColor = "green";          // 초록색으로 지정
    myRect.style.borderRadius = "50%";               // 테두리 둥글기를 50% 로 지정
  });
  myRect.addEventListener("mouseout", function() {   // 마우스 포인터를 내리면
    myRect.style.backgroundColor = "";               // 배경색 원래 값으로 지정
    myRect.style.borderRadius = "";                  // 테두리 원래 값으로 지정
  });
</script>
...

 

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)