이벤트
웹 페이지에서 일어나는 하나의 행위를 다루는 것으로서, 이를테면 링크를 클릭하거나 텍스트 영역의 밸류(value)를 바꾼다든가 하는 것들이다. 이벤트는 사용자에 의해 수행되거나 스크립트를 통해서 강제로 행해진다.
이벤트 핸들러
event handler
웹 페이지에서 발생하는 이벤트를 감지하고 그에 따른 동작을 정의하는 JavaScript 함수 또는 코드 조각
✅ 이벤트 핸들러 등록
: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것
이벤트 핸들러 어트리뷰트 방식
HTML 요소의 이벤트 핸들러 어트리뷰트에 이벤트 핸들러를 등록하는 방법
<button type="button" onclick="alert('hello');">어트리뷰트 방식 버튼</button>
<button type="button" onclick="alert777();">어트리뷰트방식2</button>
<script>
funcrion alert777(){ // 어트리뷰트에 선언한 함수를 호출하는 방식
alert('777');
}
</script>
이벤트 핸들러 프로퍼티 방식
DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 가지고 있어 프로퍼티에 직접 함수를 할당하는 방식
<button type="button" id="proBtn">프로퍼티방식</button>
<script>
// DOM 요소 노드의 프로퍼티(이벤트 관련 접두사 on + 이벤트 타입)에 등록하는 방식
const $proBtn = document.querySelector('#proBtn');
$proBtn.onclick = function(){
alert('프로퍼티 방식');
}
$proBtn.onclick = function(){
alert('입니다');
}
</script>
➡ 함수 다중 등록 ❌ addEventListener 메소드 방식 ✔
addEventListener 메소드를 이용하여 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 등록하는 방식
지정된 이벤트가 대상으로 전달될 때마다 호출되는 함수를 설정
(이미 등록된 이벤트 삭제 ➡️ removeEventListener)
<button type="button" id="methodBtn">핸들러메소드방식</button>
<script>
// addEventListener 메소드를 통해서 이벤트 핸들러 등록하는 방법
// 1) 요소 노드 가져오기
const $methodBtn = document.querySelector('#methodBtn');
// 2) 요소 노드 안의 이벤트리스너 활용
// 함수 다중 등록도 가능
$methodBtn.addEventListener('click', function(){
let txt = this.textContent;
alert(txt);
})
$methodBtn.addEventListener('click', function(){
alert('입니다');
}
)
</script>
➡ 함수 다중 등록 ⭕ <div id="btnGroup">
<button type="button" onclick="alert('hello');">어트리뷰트방식1</button>
<button type="button" onclick="alert777();">어트리뷰트방식2</button>
<button type="button" id="proBtn">프로퍼티방식</button>
<button type="button" id="methodBtn">핸들러메소드방식</button>
<button type="button" id="methodBtn2">핸들러메소드방식2</button>
</div>
<script>
const $methodBtn2 = document.querySelector('#methodBtn2');
const alelrtMsg = () => {
alert('hello');
}
// const alertThis = () => {
// alert (this.textContent);
// }
const alertMsg2 = () => {
alert(event.target.textContent);
console.log(event.target, '<-- 이벤트가 발생된 요소');
console.log(event.currentTarget, ' <-- 이벤트 핸들러가 등록된 요소');
}
const alertMsg3 = () => {
alert('goodbye');
console.log(event.target, '<-- 이벤트가 발생된 요소');
console.log(event.currentTarget, ' <-- 이벤트 핸들러가 등록된 요소');
}
$methodBtn2.addEventListener('click', alelrtMsg);
//$methodBtn2.addEventListener('click', alelrtThis); // 화살표함수에서 this를 사용하면 윈도우 객체를 가리키므로 사용 X
$methodBtn2.addEventListener('click', alertMsg2);
const btnGroup = document.querySelector('#btnGroup');
btnGroup.addEventListener('click', alertMsg3 );
</script>
</script>💡 키워드 정리
◽ Call Stack(호출 스택) : 함수가 호출되면 호출된 함수는 순차적으로 콜스택에 쌓이게 되고 순차적으로 실행된다. 단 하나의 콜스택을 사용하기 때문에 해당 함수가 종료하기 전까지는 다름 어떤 함수도 실행될 수 없다.
◽ Heap : 동적으로 생성된 객체 인스턴스가 할당되는 영역
◽ Event Queue(Task Queue) : 비동기 처리 함수의 콜백 함수, 비동기식 핸들러, Timer 함수(setTimeout(), setInterval())의 콜백 함수가 보관되는 영역으로, 이벤트 루프(Event Loop)에 의해 특정 시점(콜스택이 비었을 때)에 순차적으로 콜스택으로 이동되어 실행된다. 쉽게 말해 대기열이라고 생각하면 된다 !
◽ 이벤트 루프(Event Loop) : 콜스택 내에서 현재 실행 중인 함수가 있는지 그리고 Event Queue에 함수가 있는지 계속 체크한다(콜스택이 비어 있는지 계속 확인). 만약 콜스택이 비어 있다면 Event Queue 내의 함수가 콜스택으로 이동하고 실행된다.function func1() { console.log('func1'); func2(); } function func2() { // 비동기 처리 함수는 WEB API에게 처리를 넘긴다 setTimeout(function () { console.log('func2'); }, 1000); func3(); // 그동안 func3이 먼저 실행된다 } function func3() { console.log('func3'); } func1();콘솔 ⏬
이벤트 타입
자주 쓰이는 이벤트 예시 🔽
마우스
click: 마우스 버튼을 클릭했을 때dbclick: 마우스 버튼을 더블 클릭했을 때mousedown: 마우스 버튼을 누르고 있을 때mouseup: 누르고 있던 마우스 버튼을 뗄 때mousemove: 마우스를 움직일 때 (터치스크린에서 동작 X)키보드
keydown: 키를 눌렀을 때keyup: 누르고 있는 키를 뗄 때keypress: 키를 누르고 뗐을 때포커스
focus: 요소가 포커스를 얻었을 때blur: 요소가 포커스를 잃었을 때폼
input: input 또는 textarea 요소의 값이 변경되었을 때change: select box, checkbox, radio button의 상태가 변경되었을 때submit: form을 전송할 때reset: reset 버튼을 클릭할 때
➕DOMContentLoaded는 메소드 방식으로만 사용 가능하다.
이벤트 객체
이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. 생성된 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.
콘솔에 찍어서 확인해 보기 :
event 🔽
isTrusted: 이벤트가 브라우저에 의해 생성된 것인지 사용자 상호작용에 의해 생성된 것인지를 나타내는 boolean 값
➡️ true : 사용자이벤트, false : 프로그램 강제발생
event.type
event.target
event.target.value 🔽
keyup 이벤트리스너를 등록하고
event.key 🔽
(공백과 백스페이스 등도 포함하여) 입력하는 글자들이 찍힌다.➕ HTML과 CSS에서 스타일을 설정할 때는 하이픈(-)으로 구분된 속성 이름을 사용하는 것이 일반적이다(ex: background-color). 그러나 JavaScript에서는 이러한 하이픈으로 구분된 이름을 사용할 수 없고, 대신 카멜 표기법을 사용해야 한다(ex: backgroundColor).
mousemove 이벤트 리스너 등록하고 event🔽
clientX, clientY 정보를 이용하면 마우스 이벤트가 발생한 위치를 기반으로
웹 페이지 내에서 원하는 작업을 수행할 수 있다.
(clientX / Y : 마우스 커서의 현재 위치를 브라우저 창의 왼쪽 상단 모서리를 기준으로 한 X / Y (수평 / 수직) 좌표를 나타낸다.
➡️브라우저 창의 왼쪽 / 상단에서부터의 픽셀 거리)
이미지 출처
https://www.webdevolution.com/blog/Javascript-Event-Loop-Explained