[JAVA SCRIPT] 16_EVENT

이벤트

웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정 요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것

이벤트 타입

• 이벤트 종류를 의미함
• 이벤트 객체의 type 속성으로 확인
• 주요 이벤트 타입
  (1) click : 클릭
  (2) dbclick : 더블클릭
  (3) load : HTML문서 모두 읽음
  (4) mouseover : 마우스 가져다 댐
  (5) mouseout : 마우스 나감
  (6) keydown : 키가 내려감 (입력 직전)
  (7) keyup : 키가 올라옴 (입력 직후)
  (8) focus : 포커스를 가짐
  (9) blur : 포커스를 잃음
  (10) submit : 서브밋 (form 태그의 모든 입력 요소를 서버로 보냄)

이벤트 대상

• 이벤트가 동작하는 HTML 구성요소를 의미함
• 이벤트 객체의 target 속성으로 확인

이벤트 리스너

• 이벤트가 발생하면 동작하는 함수
• 선언적 함수, 익명 함수 모두 리스너로 등록 가능
• 이벤트 리스너의 매개변수에는 자동으로 이벤트 객체가 전달됨

이벤트 객체

• 해당 이벤트의 상세 정보를 저장한 객체
• 이벤트 발생 시 자동으로 생성
• 이벤트 발생 시 이벤트 리스너에 인수로 자동으로 전달

<button id="btn">버튼<／button>
<script>
  document.getElementById('btn').onclick = function(ev){
  console.log(ev.type);
  console.log(ev.target);
  console.log(ev);
  }
</script>
// '버튼' 을 클릭하면 콘솔에 이벤트의 타입, 타겟을 나타내는 코드

<script>
   onload = function(){
   document.getElementById('box').textContent = 'Hello World';
   }
</script>
<div id="box"><／div>
// 

이벤트 속성

• 이벤트를 등록시키는 속성
  'on' + 이벤트 타입
  ex) onclick, onload, onmouseover 등

이벤트 모델 (이벤트 처리 방식)

1. 고전 이벤트 모델

• 하나의 이벤트는 하나의 이벤트 리스너만 처리할 수 있음
• 이벤트 등록 시 '이벤트 속성'을 사용
• 처리 방식
  • 선언적 함수
    function f1(){} 문서객체.onclick = f1
    이벤트 리스너의 이름만 등록
  • 익명 함수
    문서객체.onclick = function(){}
• EX)

  <button id="btn1">클릭<／button>
  <script>
    function fn1(){
    alert('Hello');
    }
    function fn2(){
    alert('안녕하세요');
    }
    /* 2개의 이벤트 리스너(fn1,fn2)는 등록되지 않는다
    document.getElementById('btn1').onclick = fn1;
    document.getElementById('btn1').onclick = fn2;      // fn1은 없어지고 fn2로 덮어쓰기 됨
    */
    function fn3(){
    fn1();
    fn2();
    }
    document.getElementById('btn1').onclick = fn3;
    document.getElementById('btn1').onmouseover = function(){
    fn3();
    } 
  <／script> 

2. 표준 이벤트 모델

• 하나의 이벤트가 여러 개의 이벤트 리스너를 가질 수 있음

• 이벤트 등록 시 '이벤트 타입'을 사용

• 처리 방식

  • 선언적 함수

    function fn1() {
    }
    function fn2() {
    }
    문서객체.addEventListener('click',fn1);
    문서객체.addEventListener('click',fn2);

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

• EX)

  <button id="btn2">클릭<／button>
  <script>
    function fn1(){
    alert('Hello');
    }
    function fn2(){
    alert('안녕하세요');
    }
    /* 표준 이벤트 모델은 여러 개의 이벤트 리스너를 등록할 수 있다! */
    document.getElementById('btn2').addEventListener('click',fn1);
    document.getElementById('btn2').addEventListener('click',fn2);
    document.getElementById('btn2').addEventListener('mouseover', function(){
    fn1();
    fn2();
    });
  </script>

3. 인라인 이벤트 모델

• HTML 구성요소에 직접 이벤트 속성을 추가하고 이벤트 리스너를 등록하는 방식

• 간단한 작업의 경우 이벤트 리스너를 생략하고(함수 생략) 본문만 작성할 수 있음

• 처리 방식

  • 선언적 함수

    <button onclick="fn1()"><／button>
    function fn1() {
    }

  • 익명 함수
    <button{}">
    

• 이벤트 리스너 생략
  <button><／button>
  

• EX)

  <button id="btn3" onclick="fn3()" onmouseover="fn3()">클릭<／button> 
      <script>
          function fn1(){
              alert('Hello');
          }
          function fn2(){
              alert('안녕하세요');
          }
          function fn3(){
          fn1();
          fn2();
         }
      </script>                               

이벤트 관련 용어

• 이벤트 타입 : click
• 이벤트 속성 : onclick
• 이벤트 대상 : btn4 (
  • 이벤트 대상 호출 방법 ★★ 매우중요
    1. event.target
    2. this
• 이벤트 리스너 : function(event) { }
• 이벤트 객체 : event
  

  <button id="btn4">클릭</button>
    <script>
        document.getElementById('btn4').onclick = function(event){
     // 이벤트 대상 확인
     console.log(event.target.textContent);
     console.log(this.textContent);
            // 위아래 같음
     // 이벤트 대상 변경
     event.target.textContent = '눌렀어?';
     this.textContent = '또 눌렀어?';
        }
    </script>                                                     

load 이벤트

• 로드 위에 스크립트 생성
• window 객체
• JS의 최상위 객체, 생략가능 (대부분 생략한다)

  window.onload = function(){ // 모든 코드를 읽은 후 진행
    document.getElementById('btn5').onclick = function(event){
        alert(event.target.textContent);
      }
  }
  </script> 
  <button id="btn5">클릭<／button>