본문 바로가기

자바스크립트

[자바스크립트] - DOM에서 이벤트 처리하기 > 해당 요소에 이벤트 직접 적용하기, 함수명으로 이벤트 연결하기

 DOM에서 이벤트 처리하기 

DOM 이벤트란 사용자가 해당 페이지에서 하는 모든 행위를 뜻한다. 

 

 이벤트 : 
클릭이나 더블클릭, 마우스휠로 페이지를 위 아래로 이동하거나 태그 위에 마우스를 올리는 등 모든 행위

자바스크립트에서 이벤트를 실행시키려면 이벤트 처리기(event handler)를 연결해야한다. 

(실무에서는 이벤트 핸들러, 핸들러라고 한다)
html 태그에 직접 이벤트 핸들러를 연결시킬 수도 있지만 태그와 스크립트 소스가 섞여있어서 복잡한 프로그램에는 적합하지 않다.  
이럴 때 자바스크립트 내부에서 이벤트 핸들러를 연결하면 html태그와 스크립트 소스를 완전히 분리시킬 수 있다. 

 

 [기본형]

< 1. 해당 요소에 이벤트를 직접 적용하기 >
    
요소명.on이벤트명 = function(){ 자바스크립트 코드; }
-------------------------------------------
: 위 기본형은 해당 요소에 이벤트 1개를 직접 적용할 때 사용한다. 다른 태그에는 해당 이벤트가 적용되지 않는다. 
on행위하면 옆에 함수가 실행된다. 

===============================================================================
< 2. 함수명을 이용해 이벤트를 연결하기 >
      
변수명1 = 요소선택

function 이벤트명(){
   자바스크립트 코드;
}

변수명1.이벤트명 = 함수명호출;
------------------------------------------------
: 이벤트를 함수로 등록한다. 이 이벤트는 분리해서 썼기때문에 여러 태그에 동시에 적용할 수 있다. 
※이 경우에는 함수호출할 때 함수명 뒤에 ()를 붙이지 않는다.

※ 2번째 방법으로 함수명을 이용해 이벤트를 연결할 때는 함수 호출할 때 함수명 뒤에( )가 붙지 않는다. 


1. 해당 요소에 이벤트를 직접 적용. 이 해당요소에만 쓸 수 있다. 

   <img src="./img/bed.jpg" alt="침대" width="400" id="image1" />
    <img src="./img/coffee.jpg" alt="커피" width="400" id="image2" />
 
     const imgTag1 = document.querySelector("#image1");

      //이미지1를 클릭하면 함수를 호출해서 실행해라. imgTag1에만 적용
      imgTag1.onclick = function () {
        alert("이미지를 클릭했습니다");
      };
 

 


2. 함수명을 이용해 이벤트 연결. 함수를 바깥에 빼놨어서 다른 요소에도 적용할 수 있다. 

   <img src="./img/bed.jpg" alt="침대" width="400" id="image1" />
    <img src="./img/coffee.jpg" alt="커피" width="400" id="image2" />
 
      const imgTag2 = document.querySelector("#image2");

      //이미지를 클릭하면 imgTag2의 src 속성을 alert 창으로 출력해주는 함수
      function clickImage() {
        alert(imgTag2.getAttribute("src"));
      }

      //imgTag2를 클릭하면 clickImage 함수 호출해서 실행/ 함수명으로 이벤트를 실행할 때에는 함수명 뒤에 ()를 붙이지 않는다.
      imgTag2.onclick = clickImage;