[오늘의 자바스크립트] 이벤트 (Event)

이벤트(Event) ? 웹브라우저나 사용자가 행하는 어떠한 동작 / 시스템에서 일어나는 사건(action)혹은 발생(occurrence)

- 표준 이벤트 모델

eventTarget.addEventListener();

대상: element, Document, window, XMLHttpRequest....

.addEventListener('이벤트 이름', 콜백함수event handler);

ㄴ대상을 지정하지 않으면 전역객체 window를 바인딩 한다.

ㄴaddEventListener안의 콜백함수명 작성시 ()를 포함하여 작성하면 즉시실행된다, 이벤트 발생하면 함수가 실행되도록 하기위해서는 함수명만을 기입한다.

- 고전 이벤트 모델

.onclick, .onblur , .onmouseenter...

.on접두어

.on('click', function(){})

 

- 인라인 이벤트 모델

<a href = "#" onclick='fx()'>

 

- 이벤트 버블링 bubbling : 자식 -> 부모 순으로 이벤트 전달 ; 즉 자식요소에 적용한 이벤트가 부모요소에게 까지 영향을 주는 것

   ㄴ event.stopPropagation(); // 현재 이벤트가 상위 노드까지 전달되는 것을 방지하기위해 작성(매개변수로 event작성)

   ㄴ event.preventDefault(); // 요소의 기본 성격 제거

    (a태그 기본 성격: 페이지 상단으로 이동함, button태그 기본성격: 누르면 새로고침됨)

 

- 이벤트 캡쳐링 capturing : 부모 -> 자식순으로 이벤트 전달 (IE지원 X)

 

- 이벤트 핸들러event handler

이벤트 발생시 실행되는 코드 모음. 실행되는 함수

특정요소에 지정된 이벤트가 발생하면 이벤트 리스너에 연결된 이벤트 핸들러 실행

- 이벤트 리스너 event listener

특정 이벤트에 대해 일어날 동작

보통 이벤트 리스너와 이벤트 핸들러를 합쳐 이벤트 리스너라고 함

 

 마우스 이벤트 

- click : 사용자가 요소를 마우스로 눌렀을 때 이벤트 발생 
- dblclick : 사용자가 요소를 마우스로 두번 눌렀을 때 이벤트 발생
- mousedown : 사용자가 요소위에서 버튼을 누르는 동안 이벤트 발생
- mousemove : 사용자가 요소위에서 마우스 포인터를 움직일 때 이벤트 발생
- mouseover : 마우스포인터가 요소위로 옮겨질 때 이벤트 발생 (하위 노드에 영향을 줌 -이벤트 캡쳐링)
- mouseout : 마우스 포인터가 요소를 벗어날 때 이벤트 발생 (하위 노드에 영향을 줌 -이벤트 캡쳐링)
- mouseup : 사용자가 누르고 있던 버튼에서 마우스를 땔때 이벤트 발생 
- mouseenter: 마우스가 올렸을 때 (하위 노드에 영향을 주지 않음)
- mouseleave: 마우스가 벗어났을 때 (하위 노드에 영향을 주지 않음)
 

폼 이벤트

- blur : 폼요소에 포커스를 잃었을 때 이벤트 발생
- change : 목록이나 체크 상태등이 변경되었을 때 이벤트 발생 (input, select, textarea 태그에서 사용)
- focus : 폼요소에 포커스가 놓였을 때 이벤트 발생 (label, select, textarea, button태그에서 사용)
- reset : 폼이 다시 시작되었을 때 이벤트 발생 
- submit : submit버튼을 눌렀을 때 이벤트 발생
 

키보드 이벤트

- keypress : 사용자가 키를 눌렀을때 이벤트 발생 (웹브라우저에 따라 아시아 문자를 제대로 처리하지 못해 잘 사용 하지 않음)
- keydown : 사용자가 키를 누르는 동안 이벤트 발생
- keyup : 사용자가 키에서 손을 뗄때 이벤트 발생 
 

- event.target

실제 이벤트가 발생하는 요소를 반환. 이벤트 리스너가 등록되어있는 자식요소 반환 

- event.currentTarget

이벤트 리스너가 있는 요소를 반환. 이벤트를 등록해 놓은 요소 반환(일반적으로는 버튼)

 

ex) 아래의 경우

box1을 이벤트 바인딩 해둔상태에서

box1을 클릭 했을 때 : target->DIV, current-> DIV;

h1을 클릭 : target->h1, current-> DIV;

h2을 클릭 : target->h2, current-> DIV;

 

box2을 이벤트 바인딩 해둔상태에서

a 클릭: target->a, current-> DIV;

li 클릭: target->li, current-> DIV;

=============[HTML]============= 

<div class="box1">

<h1>txt1</h1>

<h2>txt2</h2>

</div>

 

<div class="box2">

  <ul>

      <li><a href="https://naver.com" target="_blank">네이버 바로가기</a></li>

  </ul>

</div>

=============[JS]=============

// .box1에 이벤트 binding된 상태 

const box1 = document.querySelector('.box1');

 

box1.addEventListener('click', event=>{

console.log(`target -> ${event.target.tagName}`);

console.log(`currentTarget->${event.currentTarget.tagName}`);

}); 

 

// .box2에 이벤트 binding된 상태  

const box2 = document.querySelector('.box2');

box2.addEventListener('click',e =>{

e.preventDefault(); 

e.target.style.borderColor = 'tomato'; // 클릭한 곳만 이벤트 효과를 넣기위해 > target활용

console.log(`target -> ${e.target.tagName}`);

console.log(`currentTarget->${e.currentTarget.tagName}`);

});