JavaScript - event

1. 이벤트 대상

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

2. 이벤트 타입

1) 이벤트 종류를 의미한다.
2) 이벤트 객체의 type 속성(프로퍼티)으로 확인할 수 있다.
3) 주요 이벤트 타입
(1) click : 클릭
(2) dblclick : 더블클릭
(3) mouseover : 마우스 가져다대면 동작
(4) mouseout : 마우스 떠나면 동작
(5) keydown : 키 내려갈 때
(6) keypress : 키 누를 때
(7) keyup : 키 올라올 때
(8) focus : 포커스를 가지면
(9) blur : 포커스를 잃으면
(10) submit : 서브밋할 때

3. 이벤트 리스너

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

4. 이벤트 객체

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

5. 이벤트 모델

1) 이벤트를 작성하는 방법이다.
2) 종류
(1) 고전 이벤트 모델
(2) 표준 이벤트 모델
(3) 인라인 이벤트 모델

고전 이벤트 모델

1. 하나의 이벤트 타입은 하나의 이벤트 리스너만 가질 수 있다.
2. 형식
   1) 선언 함수

          function 함수명(){

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

2) 익명 함수 (추천!)

          문서객체.onclick = function(){

          }

고전 이벤트 모델

  <div id="box1">
    box1
  </div>
  <script>
    /*
      1. 이벤트 대상   : document.getElementById('box')
                         event.target
                         this
      2. 이벤트 타입   : click
      3. 이벤트 리스너 : function(event){}
      4. 이벤트 객체   : event
    */
    document.getElementById('box1').onclick = function(event){
      // event.target.style.fontSize = '32px';
      this.style.fontSize = '32px';
    }
  </script>

표준 이벤트 모델

1. 하나의 이벤트 타입에 여러 개의 이벤트 리스너를 등록할 수 있다.
2. 형식
   1) 선언 함수

 
function 함수명(){

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

2) 익명 함수 (추천!)

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

});

표준 이벤트 모델

  <div id="box2">
    box2
  </div>
  <script>
    document.getElementById('box2').addEventListener('click', function(event){
      this.style.fontSize = '32px';
    });
    document.getElementById('box2').addEventListener('click', function(event){
      this.style.color = 'crimson';
    });
  </script>

인라인 이벤트 모델

1. HTML 구성 요소에 이벤트 속성을 추가하고 실행할 이벤트 리스너를 등록한다.
2. 형식
   1) 선언 함수

          function 함수명(){

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

2) JavaScript 코드

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

인라인 이벤트 모델

  </script>

  <div id="box3" onclick="myFunc(this)">
    box3
  </div>
  <script>
    function myFunc(dom){
      dom.style.fontSize = '32px';
    }
  </script>

이벤트 방지하기

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

이벤트 방지하기

  <!-- 이벤트 방지하기 -->
  <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>