이벤트 객체

이벤트(event) 는 무언가 일어났다는 신호이며 모든 DOM 노드는 이런 신호를 만들어 낸다 이벤트는 DOM에만 한정되진 않다

 

 

이벤트 핸들러

이벤트가 발생했을 때 그 처리를 담당하는 실행 함수이다

이벤트 발생시에 이벤트 핸들러가 호출될 때 이벤트 객체가 전달되는데 이 때

이벤트 핸들러 함수의 매개변수를 통해 이벤트 객체를 받을수 있다

 

target.onclick = function(){ }

function handler(){ }
target.onclick=handler(올바른코드)
=>handler():함수 실행을 등록하는건 잘못된 코드이다


target.addEventListener ("click", function() { } ) 
=>addEventListener 현대적인 방법이다

 

 

addEventListener를 여러 번 호출하면 아래와 같이 핸들러를 여러 개 붙일 수 있다

 

<input id="elem" type="button" value="클릭"/>

<script>
  function handler1() {
    alert('감사합니다!');
  };

  function handler2() {
    alert('다시 한번 감사합니다!');
  }

  elem.onclick = () => alert("안녕하세요.");
  elem.addEventListener("click", handler1); // 감사합니다!
  elem.addEventListener("click", handler2); // 다시 한번 감사합니다!
</script>

event.target

이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있다

이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근한다

실제 이벤트가 시작된 ‘타깃’ 요소입니다. 버블링이 진행되어도 변하지 않는다

 

vent.target과 this(=event.currentTarget)는 차이점이 있다

event.target – 폼 안쪽에 실제 클릭한 요소를 가리킨다

P 클릭시 => target = P,  this=FORM

DIV 클릭시 => target = DIV,  this=FORM

FROM 클릭시 => target = FORM,  this=FORM

 

이벤트 버블링

한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상

이벤트 캡처링

캡처링은 버블링과는 반대로 최상위 태그에서 해당 태그를 찾아 내려가는 현상