Javascript - 이벤트

Javascript

이벤트 만만하게 봐서 미안해 .. 속이 깊은 친구였구나 넌

 

🎉 이벤트

이벤트란 웹페이지에서 발생하는 대부분의 일들을 말함 (버튼클릭, 스크롤, 키보드입력 등등!)
이벤트 핸들링은 자바스크립트를 통해 이벤트를 다루는 일
이벤트 핸들러는 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드, 이벤트 리스너라고도 한다.

 

🎉 이벤트 핸들러 등록

HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록하는 방법 외에

Element.addEventListener('type', 'handler') 를 통해서 이벤트 핸들러를 등록 가능!

 

🎉 이벤트 핸들러 삭제

addEventListener 메소드를 활용해서 이벤트 핸들러를 등록했다면,

Element.removeEventListner('type', 'handler') 를 통해서 이벤트 핸들러를 삭제

 

🎉 이벤트 종류

요소별 이벤트	click, mouse, touch, keyboard 등
전체 대상 이벤트	resize, scroll 등
form 대상 이벤트	submit, reset, change 등

 

🎉 마우스 이벤트

mousedown 마우스 버튼을 누르는 순간
mouseup 마우스 버튼을 눌렀다 떼는 순간
click 왼쪽 버튼을 클릭한 순간
dblclick 왼쪽 버튼을 빠르게 두 번 클릭한 순간
contextmenu 오른쪽 버튼을 클릭한 순간
mousemove 마우스를 움직이는 순간
mouseover 마우스 포인터가 요소 위로 올라온 순간
mouseout 마우스 포인터가 요소에서 벗어나는 순간
mouseenter 마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음)
mouseleave 마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음

 

🎉 키보드 이벤트

keydown 키보드의 버튼을 누르는 순간
keypress 키보드의 버튼을 누르는 순간 ('a', '5' 등 출력이 가능한 키에서만 동작하며, Shift, Esc 등의 키에는 반응하지 않음)
keyup 키보드의 버튼을 눌렀다 떼는 순간

 

🎉 포커스 이벤트

focusin 요소에 포커스가 되는 순간
focusout 요소로부터 포커스가 빠져나가는 순간
focus 요소에 포커스가 되는 순간 (버블링이 일어나지 않음)
blur 요소로부터 포커스가 빠져나가는 순간 (버블링이 일어나지 않음)

 

🎉 입력 이벤트

change 입력된 값이 바뀌는 순간
input 값이 입력되는 순간
select 입력 양식의 하나가 선택되는 순간
submit 폼을 전송하는 순간

 

🎉 스크롤 이벤트

scroll 스크롤 바가 움직일 때

 

🎉 윈도우창 이벤트

resize 윈도우 사이즈를 움직일 때 발생

 

🎉 이벤트 객체 공통 프로퍼티

이벤트 객체별로 다양한 프로퍼티가 있지만 ...

일단은 공통 프로퍼티

 

type 이벤트 이름 ('click', 'mouseup', 'keydown' 등)
target 이벤트가 발생한 요소
currentTarget 이벤트 핸들러가 등록된 요소
timeStamp 이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초)
bubbles 버블링 단계인지를 판단하는 값

 

🎉 HTML 구문상에서 선언된 호출명에 의한 함수 실행

<div class="evt1">
    <button onclick="evt1()">이벤트-1</button>
</div>
<script>
    const evt1 = () => {
        console.log("이벤트1 클릭에 의한 함수 실행");
    }
</script>

버튼에 onclick 활용

 

🎉 스크립트에서만 선언한 이벤트에 의한 함수 실행

<h4>이벤트-2 : 스크립트에서만 선언한 이벤트에 의한 함수 실행</h4>
<div class="evt2">
    <button>이벤트-2</button>
</div>
<script>
    const evt2Btn = document.querySelector(".evt2 button");
    const evt2Func = () => {
        console.log("이벤트-2 클릭에 의한 함수 실행");
    }
    evt2Btn.onclick = evt2Func;
</script>

버튼은 가만히 있을 뿐, 스크립트에서 버튼을 가져와서 onclick 해줌

 

🎉 스크립트에서만 이벤트에 의한 함수 실행 (addEventListener)

<h4>이벤트-3 : 스크립트에서만 이벤트에 의한 함수 실행
(addEventListener)</h4>
<div class="evt3">
    <button>이벤트-3</button>
</div>
<script>
    const evt3Btn = document.querySelector(".evt3 button");
    evt3Btn.addEventListener("click", () => {
        console.log("이벤트-3 클릭에 의한 함수 실행");
    });
</script>

버튼은 가만히 .. onclick이 아닌 addEventListener로 클릭 이벤트를 등록해줌

 

 

 

이벤트 버블링과 캡처링은 너무 어렵네 ..

이건 나중에 올려야지