[javascript]-Event

자바스크립트 시리즈는 '생활코딩-클라이언트 과목의 '웹브라우저 자바스크립트' 강의'를 참고로
공부하고 기록하기 위한 용도입니다. 

 

* Event

<input type="button" onclick="alert(window.open)" value="window.open" />

 

- Event target : 지정한 이벤트가 발생하는 대상을 말하며, 위 코드의 경우에는 버튼 태그의 객체입니다. 

- Event type : 이벤트의 종류를 의미하며, 위 경우 'click'이 이벤트 타입입니다.  + 이벤트 타입의 종류

- Event Handler : 이벤트가 발생했을 때 수행될 코드를 말하며, 위에서는 'alert(window.open)'을 가리킵니다.

대부분 function 이벤트 핸들러 를 차지합니다. 

 

-> 이벤트를 동작시키기 위해서는, 이벤트의 대상에 이벤트 핸들러를 등록해줘야 하는데, 

등록하는 방법에는 Inline방식 , Property Listener 방식, addEventListener() 방식이 있습니다. 

---

- Inline 방식 

<input type="button" onclick="alert('Hello world');" value="button" />

: 이벤트 핸들러를 이벤트 대상 태그와 함께 작성해줍니다. 

 <input type="button" onclick="alert('Hello world, '+this.value);" value="button" />

: 이벤트가 발생한 대상을 필요로 하는 경우에는, this 를 통해 쉽게 참조할 수 있습니다. 

: id를 통해 element 를 얻어오는 경우 id 특성상 여러번 참조할 수 없기때문에, this 로 참조해줍니다.

 

-Property Listener 방식 

: 이벤트 대상인 객체의 프로퍼티로 이벤트를 등록하는 방식입니다. 

<input type="button" id="target" value="button" />

<script>
   var t = document.getElementById('target');
   t.onclick = function(event){
      alert('hello' + event.target.value);
    }
</script>

: 이벤트 대상 객체 t의 프로퍼티 onclick 에 이벤트 핸들러function을 저장해줍니다. 

이 때, 이벤트 핸들러는 첫번째 인자로 event 객체를 전달받아,

해당 객체의 target의 value 로 객체 값을 가져올 수 있습니다. 

 

-addEventListener() 방식 

: 이벤트 핸들러 등록에 가장 권장되는 방식입니다.

<input type="button" id="target" value="button" />

<script>
      var t= document.getElementById('target');
      t.addEventListener('click', function(event){
        alert('hello,'+ event.target.value);
      });
</script>

: 이벤트 대상인 객체 t를 얻어와, t의 addEventListener 로 이벤트 핸들러를 등록해주는데, 

첫번째 인자로 이벤트 타입을, 두번째 인자로  이벤트 핸들러 를 등록해줍니다.

이때 정의되는 function은 event를 인자로 전달받아, 사용하게 됩니다. 

 

-> addEventListener 의 방식은 하나의 이벤트 대상에, 복수의 동일 이벤트타입 리스너를 등록할 수 있습니다. 

  <input type="button" id="target0" value="multiple" />
     
   <script>
     var m = document.getElementById('target0');
    m.addEventListener('click',function(event){
      alert(1);
    });
    m.addEventListener('click',function(event){
      alert(2);
    });
  </script>

->addEventListener 의 방식은 복수의 이벤트 대상에, 하나의 이벤트 리스너를 등록해서 재사용할 수 있습니다. 

 <input type="button" id="target1" value="button1" />
 <input type="button" id="target2" value="button2" />
 
 <script>
  var t1= document.getElementById('target1');
      var t2= document.getElementById('target2');
        function btn_listener(event){
          switch(event.target.id){
            case 'target1':
                  alert(1);
                  break;

          case 'target2':
                alert(2);
                break;
        }
        }
        t1.addEventListener('click',btn_listener);
        t2.addEventListener('click',btn_listener);
     //여러개의 엘리먼트에 이벤트 리스너를 등록해서 사용할 수 있다.
    </script>