JS event (part. 03) - 이벤트 발생 객체와 이벤트 객체

이벤트 리스너 안에서 this 키워드를 사용하면 이벤트가 발생한 객체를 찾을 수 있음

<script>
  window.onload = function () {
    document.getElementById('header').onclick = function() {
 	   alert(this);
    };
  };
</script>

h1 태그 클릭시 경고창에 [object HTMLHeadingElement] 출력됨

 

<script>
  window.onload = function () {
    document.getElementById('header').onclick = function(e) {
      var event = e || window.event;

      document.body.innerHTML = '';
      for (var key in event) {
          document.body.innerHTML += '<p>' + key + ': ' + event[key] + '</p>';
      }
    };
  };
</script>

이벤트가 어디서 발생했는지, 타입은 무엇인지, alt나 shift, ctrl 등을 함께 눌렀는지, 마우스의 x좌표, 마우스의 y좌표 등 이벤트와 관련된 모든 내용이 출력됨

 

// 첫줄
var event = e || window.event;

인터넷 익스플로러 8 이하의 버전은 이벤트가 발생할 때 이벤트 객체를 window.event 속성으로 전달하지만, 다른 브라우저는 이벤트 리스너의 매개변수로 전달하므로 사용한 코드

 

note. 인터넷 익스플로러 9부터는 두 가지 방식을 모두 사용가능