[javascript] 이벤트와 이벤트 객체

 

 

모든 객체object는 고유의 Method()와 Property를 가지고 있다.

document.getElimentById('choice').textContent = new Date();
//객체.메서드().프로퍼티

 

 

 

 

이벤트

The Event  interface represents an event which takes place in the DOM. … Many DOM elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them.

https://developer.mozilla.org/en-US/docs/Web/API/Event

 

쉽게 말해 정적인 상황에서 HTML 요소에 대해 동적인 사건이 발생하는 것.

마우스 이벤트(클릭, 스크롤 등), 포커스 이벤트 등이 있다.

웹 이벤트는 ECMAScript가 아닌 브라우저에 내장된 API의 일부.

 

이벤트 리스너event listner

이벤트가 발생했을 때 실행되는 코드블럭. 즉 함수이다.

 

var btn=document.querySelector('.btn');

btn.addEventListner('click',btnClickHandler);
//이벤트를 발생시킬 대상객체.실행할 메서드(이벤트 이름,이벤트가 발생했을때 실행시킬 함수, 이벤트 전파방식);

* 참고

이벤트 이름 : 문자열

이벤트 핸들러 : 이벤트가 발생했을 때 실행시킬 함수, event객체를 인수로 받는다.

이벤트 전파방식 : false (bubbling) / true (capturing) //알아만 두기

 

 

이벤트 객체event object

이벤트 핸들러 함수 내부에서 주로 e, event, eve 등으로 명명하는 매개변수를 말한다.

특정 타입의 이벤트와 관련이 있는 객체로, 해당 타입의 이벤트에 대한 상세 정보를 가지고 있다.

따라서 이벤트 핸들러에 추가적인 기능과 정보를 제공하고, 

함수가 이벤트 핸들러로 실행 될 때 자동으로 그 내용이 전달된다.

이벤트 객체가 가진 대표적인 프로퍼티와 메서드는 다음과 같다.

 

멤버	종류	설명
type	프로퍼티	현재 발생한 이벤트의 종류를 나타내는 문자열(click, load 등)
target	프로퍼티	이벤트를 발생시킨 객체(DOM 객체 혹은 HTML 태그)
currentTarget	프로퍼티	현재 이벤트 리스너를 실행하고 있는 DOM 객체
defaultPrevented	프로퍼티	이벤트의 디폴트 행동이 취소되었는지를 나타내는 true/false 값
preventDefault()	메소드	이벤트의 디폴트 행동을 취소시키는 메소드

[출처] [ 10일차 ] 이벤트 객체 + 이벤트 흐름|작성자 퐁치퐁치

 

 

그 외에도, 이벤트 타입에 따라 여러가지 속성들이 있다.

타입	속성명	설명
마우스 이벤트	clientX, clientY	마우스 포인터의 좌표값 반환
	pageX, pageY	스크롤 축의 이동거리를 계산하여 포인터의 좌표값 반환
	screenX, screenY	화면 모니터를 기준으로 포인터의 좌표값 반환
	layerX, layerY	position을 적용한 요소를 기준으로 포인터의 좌표값 반환
	button	마우스 버튼의 종류에 따라 값을 반환 (왼쪽 0, 휠 1, 오른쪽 2)
키보드 이벤트	keyCode	키보드의 아스키 코드값을 반환
	altKey, ctrlKey, shfitKey	이벤트 발생 시 해당 키가 눌렸으면 true, 아니면 false

출처 : Do it! 자바스크립트 + 제이쿼리 입문

 

이벤트 객체의 응용, 이벤트 위임

이벤트 객체의 속성 중 target을 사용하여 이벤트를 위임할 수 있다.

즉, 이벤트를 실행할 객체가 아닌 그 상위 엘리먼트에 이벤트리스너를 등록하는 것.

 

다음 예제는,

nav.menu가 있고 그 안에 a들이 있는 상황인데,

a를 클릭할 때마다 menu-active 라는 클래스를 추가해야한다.

var currentMenu;
var menus=document.querySelector('.menu');

function clickHandler(e){
	console.log(this);
  	  // nav.menu *1참조
	console.log(e.currentTarget);
	// this와 같은 결과 *2참조
	console.log(e.target);
	// e.target : this가 아닌 직접 이벤트가 발생한 타겟(자식요소 등) -> 이벤트 위임에 사용 *3참조

	if (currentMenu){ // currentMenu 값이 있으면
		currentMenu.classList.remove('menu-active');
	}
	e.target.classList.add('menu-active');
	currentMenu=e.target; // 변수 갱신
}

menu.addEventListner('click',clickHandler);

 

*1 . this 는 addEventListner를 호출한 객체. 자식요소인 a를 클릭해도 nav.menu가 나옴

*2 . console.log(currentTarget == this) // true

*3 . target은 자식요소도 확인 가능. 실제로 내가 클릭한 요소가 나옴.

 

 

참고로 제이쿼리에서도 아래와 같이 이벤트 위임이 가능하다.

$('.menu').on('click', '.menu-link', function(){
	$(this).~~~ // this가 menu-link를 가리킴
});

출처 : https://youtu.be/Y3_2BLb3hz8