DOM에서 이벤트 처리하기

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

 

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

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

// img 요소를 가져와 변수에 저장한 후 onclick을 사용해 변수에 이벤트 처리기(함수)를 직접 연결

 

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

 

이벤트가 발생했을 때 실행할 함수를 따로 정의해 놓았다면 함수 이름을 사용해 연결할 수 있다.

(함수 이름 다음에 괄호(())를 추가하지 않는다.)

<script>
    var cup = document.querySelector("#cup"); // id = cup인 요소를 가져옴
    cup.onclick = changePic; // cup을 클릭하면 changePic 함수 실행

    function changePic() {
        cup.src = "images/cup-2.png";
    }
</script>

 

DOM의 event 객체 알아보기

 

• DOM에는 이벤트 정보를 저장하는 event 객체가 있다. 
• 이 객체에는 웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어 있다.
• event 객체에는 이벤트 정보만 들어 있다.
• 만약 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this를 사용해야 한다.

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

 

addEventListener() 메서드 사용하기

 

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

  요소.addEventListener(이벤트, 함수, 캡처 여부);
  
  // 1. 이벤트 : 이벤트 유형을 지정한다. 단, click과 keypress처럼 on을 붙이지 않고 쓴다.
  // 2. 함수 : 이벤트가 발생하면 실행할 명령이나 함수를 지정한다. 여기에서 함수를 정의할 때는
  //           event 객체를 인구로 받는다.
  // 3. 캡처 여부 : 이벤트를 캡처하는지 엽루를 지정하며 기본값은 false이고 true와 false 중에서
  //               선택할 수 있다. true이면 캡처링, false이면 버블링한다는 의미이다. 이벤트 캡처링은
  //               DOM의 부모 노드에서 자식 노드로 전달되는 것이고, 이벤트 버블리은 DOM의 자식 노드에서
  //               부모 노드로 전달되는 것이다.​

 

CSS 속성에 접근하기

 

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

  document.요소명.style.속성명
  
  // ex) document.getElementById("desc").style.color = "blue";

• color처럼 한 단어인 속성명은 그대로 사용하면 되지만 background-color, border-radius 처럼 중간에 하이픈(-)이 있는 속성은 backgroundColor나 borderRadius처럼 두 단어를 합쳐서 사용한다.
  (이때 두 번째 단어의 첫 글자는 Color와 Radius처럼 대문자로 표시한다.)