[JavaScript] 이벤트

Gabriela·2023년 8월 31일

JavaScript js

WEB Front-end

목록 보기

10/16

이벤트

이벤트 대상

이벤트가 동작하는 HTML 구성 요소이다.
이벤트 객체의 target 속성(프로퍼티)로 확인할 수 있다.
현재 문서 객체를 의미하는 this 키워드로 확인할 수 있다.

이벤트 타입

이벤트 종류를 의미한다.
이벤트 객체의 type 속성(프로퍼티)로 확인할 수 있다.

‣ 주요 이벤트 타입

click : 클릭

dblclick : 더블클릭

mouseover : 마우스 가져다대면 동작

mouseout : 마우스 떠나면 동작

keydown : 키 내려갈 때

keypress : 키 누를 때

keyup : 키 올라올 때

focus : 포커스를 가지면

blur : 포커스를 잃으면

submit : 서브밋할 때

이벤트 리스너

이벤트가 발생하면 동작하는 함수(function)이다.
일반적으로 익명 함수를 많이 사용한다.
이벤트 리스너의 매개변수를 선언하면 자동으로 이벤트 객체가 전달된다.

이벤트 객체

발생한 이벤트의 상세정보를 저장하고 있는 객체이다.
이벤트가 발생하면 자동으로 생성된다.
이벤트 객체를 사용하려면 이벤트 리스너(함수)의 매개변수를 선언한다.

이벤트 모델

이벤트를 작성하는 방법이다.

‣ 종류

고전 이벤트 모델

표준 이벤트 모델

인라인 이벤트 모델

고전 이벤트 모델

하나의 이벤트 대상은 하나의 이벤트 리스너만 가질 수 있다.

형식

선언 함수

function 함수명(){

}
문서객체.onclick = 함수명;

익명 함수 (추천!)
문서객체.onclick = function(){

}

예제

  <div id="box1">
    box1
  </div>
  <script>
    document.getElementById('box1').onclick = function(event){
      // event.target.style.fontSize = '32px';
      this.style.fontSize = '32px';  // 화살표 익명함수는 this 인식이 안 된다.
    }
  </script>

이벤트 대상 :
- document.getElementById('box1')
- event.target
- this
이벤트 타입 : click
이벤트 리스너 : function(event){}
이벤트 객체 : event

표준 이벤트 모델

하나의 이벤트 타입에 여러 개의 이벤트 리스너를 등록할 수 있다.

형식

선언 함수

function 함수명(){

}
문서객체.addEventListener('click', 함수명);

익명 함수 (추천!)

문서객체.addEventListener('click', function(event){

});

인라인 이벤트 모델

(태그 안에 자바스크립트가 들어가기 때문에 권장 X)

HTML 구성 요소에 이벤트 속성을 추가하고 실행할 이벤트 리스너를 등록한다.

형식

선언 함수

function 함수명(){

}
<div onclick="함수명()"></div>

JavaScript 코드

<div onclick="alert('메시지')"></div>

이벤트 방지하기

HTML 구성 요소에 따라서 가지고 있는 기본 이벤트가 있다.
- <a> 태그를 클릭하면 href 속성으로 이동한다.
- <form> 태그를 서브밋하면 <form> 태그의 모든 입력 요소들을 action 속성으로 가지고 간다.
이러한 기본 이벤트를 방지할 수 있다.
이벤트 객체의 preventDefault() 메소드를 호출한다.

‣ 활용 예제

예제1) 이벤트 방지

  </script>

  <!-- 이벤트 방지하기 -->
  <ul id="site">
    <li><a href="https://www.google.com/">구글</a></li>
    <li><a href="https://www.naver.com/">네이버</a></li>
    <li><a href="https://www.daum.net/">다음</a></li>
  </ul>
  <script>
    var sites = document.querySelectorAll('#site a');      // sites는 <a> 태그 3개가 저장된 배열이다.
    sites.forEach(function(element){                       // element에는 sites 배열에 저장된 <a> 태그가 1개씩 전달된다.
      element.addEventListener('click', function(event){   // 이벤트 방지를 위해서 event 객체를 매개변수로 선언한다.
        if(this.href.endsWith('.net/')){                   // this는 element(<a> 태그)를 의미한다. href는 속성(프로퍼티)이다.
          event.preventDefault();                          // 기본 이벤트가 방지된다.(<a> 태그는 링크 이동이 되지 않는다.)
        }
      })
    });
  </script>

예제2) 서브밋 방지1

  <div id="wrap1">
    <form action="https://search.naver.com/search.naver" id="frm">
      <div>
        <input type="text" id="query" name="query">
        <button type="submit">네이버검색</button>
      </div>
    </form>
  </div>
  <script>

    /* 주의! 서브밋은 <form> 태그가 이벤트 대상이다. <button> 태그가 아니다. */
   document.getElementById('frm').addEventListener('submit', function(event){   /* 이벤트 객체를 적어주는 장소 -> 이벤트 리스너의 매개변수 자리 */

      // 검색어가 비어 있으면 서브밋 방지
      if(document.getElementById('query').value === ''){
        alert('검색어는 필수입니다.');
        event.preventDefault();
      }

    });
  </script>

예제3) 서브밋 방지2

  <div id="wrap2">
    <form action="https://search.daum.net/search" id="frm_daum_query">
      <div>
        <input type="text" id="q" name="q">
        <input type="button" value="다음검색" id="btn_daum_query">
      </div>
    </form>
  </div>
  <script>
   document.getElementById('btn_daum_query').addEventListener('click', function(){

      if (document.getElementById('q').value === ''){
        alert('검색어는 필수입니다.');
        return;  // 이벤트 리스너 실행 종료
      }
     document.getElementById('frm_daum_query').submit(); // 서브밋!

    })
  </script>