DOM에서 이벤트 처리하기 (1)

웹 문서에서 이벤트가 발생하면 이벤트 처리기(event handler)를 연결해야 함

DOM에서 이벤트 처리기 (event handler) 를 연결하면 HTML 태그와 스크립트 소스 분리 가능

 

 

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

: 이벤트 처리기 함수가 간단할 경우

  <img src="./images/babypig.jpg" id="pig" width="400px" height="300px" />

  <script>
    const pig = document.querySelector('#pig');
    // 아이디가 pig인 요소 선택하여 pig 변수에 담기
    
    pig.onclick = function(){ // pig를 클릭하면
      alert('아기돼지 사진입니다!'); // alert창 띄우기
    }
  </script>

DOM 요소에 함수 직접 연결 결과

 

 

 

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

: 이벤트 발생했을 때 실행할 함수를 따로 정의한 경우

  <img src="./images/babypig.jpg" id="pig" width="400px" height="300px" />

  <script>
    const image = document.querySelector('#pig');
    image.onclick = changeImg; // 이미지 클릭 시 changeImg 함수 실행

    function changeImg() {
      image.src = './images/seal.jpg'; // 이미지 경로 바꾸기
    }
  </script>

함수 이름을 사용해 연결한 결과

 

 

 

DOM의 이벤트 객체

: DOM에는 이벤트 정보를 저장하는 event 객체가 존재

event 객체에는 웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보를 내포

 

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

프로퍼티	pageX	현재 문서 기준으로 이벤트가 발생한 가로위치 반환
	pageY	현재 문서 기준으로 이벤트가 발생한 세로 위치 반환
	screenX	현재 화면 기준으로 이벤트가 발생한 가로 위치 반환
	screenY	현재 화면 기준으로 이벤트가 발생한 세로 위치 반환
	target	이벤트가 최초로 발생한 대상 반환
	timeStamp	발생한 이벤트 이름 반환
	type	발생한 이벤트 이름 반환
메소드	preventDefault()	이벤트를 취소할 때

  <div>
    <img src="./images/seal.jpg" id="seal" />
  </div>

  <script>
    const image = document.querySelector('#seal');

    image.onclick = function (event) {
      alert("이벤트 유형 : " + event.type + " / 이벤트 발생 위치 : " + event.pageX + " , " + event.pageY);
    }
    // 이벤트 유형과 이미지를 클릭한 위치 나타내기
  </script>

이미지 클릭 위치 알아내기

 

 

이벤트 발생 대상에 접근

이벤트 처리기에서 예약어 this 사용

  <div>
    <img src="./images/seal.jpg" id="seal" width="300px" height="200px"/>
  </div>

  <script>
    const image = document.querySelector('#seal');

    image.onclick = function (event) {
      alert("클릭한 이미지 파일의 경로 : " + this.src
      // 이벤트가 발생한 대상의 src
      
      + ", 이미지의 가로 길이 : " + this.width 
      // 이벤트가 발생한 대상의 width
      
      + ", 이미지의 세로 길이 : " + this.height);
      // 이벤트가 발생한 대상의 height
    }
  </script>

this

 

 

 

 

 

 

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.