인터랙티브 웹 개발 제대로 시작하기-자바스크립트 이벤트 다루기

 

자바스크립트 이벤트의 기본 동작

자바스크립트를 다루면서 간단하게 이벤트를 주는 법을 학습해보자.

 

 

이벤트(event)란?

특정 버튼을 클릭했거나 DOM 로드가 완료되었을 때, 동적인 행위로 사용자와 웹페이지의 상호작용을 의미한다.

이벤트 핸들러를 통하여 이벤트가 발생할 시 원하는 함수에 연결하여 실행시킬 수 있다.

 

 

 

---

기본 메서드

preventDefault()	이벤트의 기본 액션을 취소할 수 있다면 취소
stopImmediatePropagation()	같은 이벤트의 다른 리스너가 호출 방지
stopPropagation()	이벤트 플로우 중 이벤트의 확산(propagation) 방지

기본 속성

type	이벤트의 이름을 반환
view	이벤트가 발생한 윈도우 객체의 참조 반환
bubbles	특정 이벤트가 버블링 이벤트인지 반환
cancelable	이벤트가 기본 액션을 취소할 수 있는지 반환
currentTarget	이벤트 리스너가 이벤트를 시작했을 때 그 요소를 반환
defaultPrevented	preventDefault() 메서드가 그 이벤트에 호출될 수 있는지 반환
eventPhase	이벤트 플로우의 어떤 페이즈가 현재 평가되고 있는지 반환
isTrusted	이벤트가 신뢰되는지 반환
target	이벤트를 일으킨 요소 반환
timeStamp	이벤트가 생성된 시간 반환(밀리초)

키보드 이벤트

onkeydown	ANY key is pressed
onkeypress	ANY key is in a pressed position
onkeyup	ANY key is released
이벤트 발생 순서: 1. onkeydown 2. onkeypress 3. onkeyup

마우스 이벤트

onauxclic	마우스 왼쪽 버튼을 제외한 다른 버튼을 클릭했을 때 작동
onclick	요소 위에서 클릭했을 때 이벤트 발생
oncontextmenu	컨텍스트 메뉴를 열기 위해 마우스 오른쪽 버튼을 눌렀을 때 이벤트 발생
ondblick	요소 위에서 더블 클릭했을 때 이벤트 발생
onmousedown	요소 위에서 마우스 버튼을 눌렀을 때 발생
onmouseenter	포인터가 요소로 들어갈 때 이벤트 발생
onmouseleave	포인터가 요소 밖으로 나갈 때 이벤트 발생
onmousemove	요소 위에서 포인터가 이동 중일 때 이벤트 발생
onmouseover	마우스 포인터가 요소 위로 올라왔을 때 또는 자식 요소 위로 올라왔을 때 이벤트 발생
onmouseout	마우스 포인터가 요소 밖으로 나가거나 자식 요소 밖으로 나갔을 때 이벤트 발생
onmouseup	마우스 버튼을 떼었을 때 이벤트 발생
onselect	text가 선택되었을 때(드래그시) 작동
onwheel	사용자가 휠을 작동시킬 때 작동

드래그 & 드랍 이벤트

ondrag	드래그되고 있을 때
ondragend	드래그를 끝마쳤을 때
ondragenter	드래그가 되는 요소가 드랍 타겟에 들어갔을 때
ondragstart	드래그를 시작했을 때
ondragleave	드래그가 되는 요소가 드랍 타겟에서 나왔을 때
ondragover	드래그가 되는 요소가 드랍 타겟 위에 있을 때
ondrop	드래그가 되는 요소가 드랍 타겟 위에 떨어졌을 때

포거스 이벤트

onfocus	포커스를 받았을 때
onblur	포커스를 잃었을 때
onfocusin	포커스 받기 직전
onfocusout	포커스 잃기 직전

폼 이벤트

onreset	폼이 리셋되었을 때
onsubmit	폼이 전송되었을 때

CSS 애니메이션 이벤트

animationstart	CSS 애니메이션이 시작될 때
animationcancel	CSS 애니메이션이 중지되었을 때
animationend	CSS 애니메이션이 완료되었을 때
animationiteration	CSS 애니메이션이 반복될 때

터치 이벤트

ontouchcancel	터치가 중단될 때
ontouchend	터치 스크린에서 손가락을 뗄 때
ontouchmove	손가락으로 스크린을 드래그할 때
ontouchstart	손가락을 터치 스크린 위에 놓을 때

기타 이벤트

onmessage	객체로부터 메세지를 받았을 때
onmousewheel	(사용x)
ononline	브라우저가 온라인 작업을 시작할 때
onoffline	브라우저가 오프라인 작업을 시작할 때
onpopstate	윈도우 히스토리가 변경될 때
onshow	메뉴 요소가 컨텍스트 메뉴로 표시될 때
onstorage	웹 스토리지 영역이 업데이트될 때
ontoggle	detail 요소를 열거나 닫을 때
onwheel	요소 위에서 마우스 휠을 올리거나 내릴 때

---

이벤트 리스너(event listener), 이벤트 핸들러(event handler)

어떤 이벤트가 발생했을 때 이를 처리하는 함수를 이벤트 리스너 또는 이벤트 핸들러라고 한다.

 

이벤트 리스너(핸들러)등록: 3가지 방식

1. 인라인 방식 (inline)
2. 프로퍼티 방식 (Property)
3. addEventListener() 방식, attachEvent() 방식

등록된 이벤트 리스너를 삭제시 사용: removeEventListener()

---

 

[JavaScript (17)] Javascript Event(1) - 기초

 

---

이벤트의 기본 동작을 들어가기 전에,

 

전역변수를 최대한 피하는 게 좋은 이유,

※ 정해진 규칙이 있다면 좋겠지만 여러 개발자가 한 소스에 올리는 경우 값이 중복될 수 있기 때문이다. 그래서 이를 피하려면 함수안에 선언해주면 된다.

 

<script>
	(function() {
    	const ilbuni = document.querySelector('.ilbuni.c');
        
        function clickIlbuniHandler() {
        	ilbuni.classList.toggle('special');
        }
        ilbuni.addEventListener('click', clickIlbuniHandler);
    })(); 
</script>

 

함수 뒤 ()는 호출 연산자이다.

 

this와 이벤트 객체

 

일분이들이 들어있는 컨텐츠들을 정리해준 뒤, 

 

<scirpt>
	(function() {
    	const characters = document.querySelector('.characters');
       	
        function clickHandler() {
        	console.log(this);
        }
        characters.addEventListener('click', clickHandler);
       })();
</script>

 

여기서 console.log(this);의 this는 이벤트 리스너에서 클릭된 characters를 가르킨다.

clickHandler()안에 첫번째 매개변수 e가 들어오는 데, 이 e는 이벤트에 관한 속성을 가르킨다.

 

console.log(e.currentTarget);을 작성하면 characters를 가르키는 것을 알 수 있다.

→ 각 객체를 알고 싶다면, e.target

 

---

움직이는 캐릭터 예제로 클릭 이벤트 익혀보기

 

// CSS
/*
100vw는 브라우저 폭, 100vh는 브라우저 높이
*/

.stage {
	position: relative;
	width: 100vw;
    height: 75vw;
    background: #fff000;
    overflow: hidden;
	}
@keyframes moving {
	from {
    	transform: translateX(0);
       	}
    to {
    	transform: translateX(90vw);
        }
   	}
.ilbuni {
	position: absolute;
	width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    animation: moving infinite alternate;
	}
.ilbuni:nth-of-type(1) {
	left: 5%;
    bottom: 5%;
	background-image: url('../images/ilbuni_0.png);
    animation-duration: 2s;
}
.ilbuni:nth-of-type(2) {
	left: 7%;
    bottom: 7%;
	background-image: url('../images/ilbuni_1.png);
    animation-duration: 3s;
}
.ilbuni:nth-of-type(3) {
	left: 9%;
    bottom: 9%;
	background-image: url('../images/ilbuni_2.png);
    animation-duration: 4s;
}

// script
<script>
(function() {
	const ilbuniGroup = document.querySelectorAll('.ilbuni'); 
    const stage = document.querySelector('.stage');
    
    function clickHandler(e) {
    	// console.log(this);
        // console.log(e.currentTarget); /* 클릭한 현재 객체를 가지고 온다. */
	    // stage.removeChild(this);
        this.parentNode.removeChild(this);
        
    }
    	for (let i = 0; i < ilbuniGroup.length; i++) {
        	ilbuniGroup[i].addEventListener('click', clickHandler);
          	}
        })();
</script>

클릭시 사라지는 애니메이션 효과를 확인할 수 있다.

 

이벤트 위임

 

addEventListener 이벤트 횟수를 줄여주어야 성능이 좋아진다. (=여러 번의 이벤트 등록을 회피하자.)

그래서 이벤트 위임이라는 것을 걸어주는 데, class="stage"에 이벤트를 위임해주자.

 

<script>
	(function() {
    	/* 이벤트 위임 */
    	const stage = document.querySelector('.stage');
        
        function clickHandler(e) 
        	// console.log(e.currentTarget);
            // console.log(e.target);
            stage.removeChild(e.target);
        }
        stage.addEventListener('click', clickHandler);
    })();
</script>

이때, child가 아닌 stage를 클릭하면 에러가 발생한다. (=예외처리 필요)

<script>
	(function() {
    	/* 이벤트 위임 */
    	const stage = document.querySelector('.stage');
        
        function clickHandler(e) 
        	if(e.target.classList.contains('ilbuni')) { // 예외처리
	            stage.removeChild(e.target);
           } 
        }
        stage.addEventListener('click', clickHandler);
    })();
</script>

---