자바스크립트 이벤트

모덴웹을 위한 Javascript, JQuery입문 [윤인성 지음] 참고

2017 - 11 - 03 (금)

Event 용어

Default Event

Event 용어

Event 는 사용자가 마우스를 클릭했을 때, 키보드를 눌렀을 때 시간이 지났을 때 등등 어떤 상황에 있어서 동작하는 것이다.

이벤트에서는 알아야할 몇몇 용어들이 있다.

window.onload = function(){console.log('hello world')}

이러한 코드가 있을 때, window 객체의 onload 속성에 함수 자료형을 할당한다. 즉, 이벤트를 연결한다라고 한다. 이 때 onload 를 ‘이벤트 속성(EventProperty)’ 이라고 하며 이벤트 속성에 할당된 함수를 ‘이벤트 리스너(EventListener)’ 또는 ‘이벤트 핸들러(EventHandler)’ 라고 한다.

Default 이벤트 제거 (비밀번호 확인)

  <form id ='my-form'>
    <label for="pw">비밀번호</label><br>
    <input type="password" id="pw" name = "pw">
    <label for ="pw_chk">비밀번호확인</label><br>
    <input type="password" id="pw_chk" name = "pw_chk">
    <input type = "submit" value ="제출"/>
  </form>  

  window.onload = function(){
    document.getElementById('my-form').onsubmit = function(){
      //입력 양식 유효성검사 (비밀번호 확인)

      var pw = document.getElementById('pw').value;
      var pwChk = document.getElementById('pw_chk').value;

      if(pw ==pwChk){
        alert('OK')
      }else{
        alert('비밀번호 확인 요망')
        return false;  // submit 디폴트 이벤트 제거
      }
    };
  };

표준 이벤트 모델

W3C 에서 공식적으로 지정한 DOM Level 2 의 이벤트 모델이다. (모든 브라우저에 공통적으로 적용되어야 함)

메서드
- addEventListener(eventName, handler, useCapture)
- removeEventListener(eventName, handler)

useCapture 매개변수의 경우 입력을 안할 시 false 가 default가 된다.

사용방법

window.onload = function(){
  var header = document.getElementById('header');

  header.addEventListener('click', function(){
    this.innerHTML += '+';
  });
};

주의점

자바스크립트 코드에는 간혹 특정브라우저에서만 지원하는 메서드들이 있다. 확장성을 위해 W3C 표준 코드를 사용하는 것이 좋을 것 같다. 공통적인 코드를 사용하기 위해 잘알아볼 필요가 있다.