[JavaScript] 06.이벤트

이벤트

HTML 이벤트는 HTML 요소에서 발생할 수 있는 상황

브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 통지

ex) HTML 웹 페이지 로딩이 끝났을 때, HTML 입력 필드가 변경될 때, HTML 버튼이 클릭됐을 때

 

on까지만 쓰고 단축키를 눌렀을 때 나오는 것이 대부분 이벤트이다. 

 

이벤트 드리븐(event-driven) 방식 

웹 페이지에 작용되는 자바 스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행

모든 application이 이벤트 방식으로 동작하는 것으로, 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 것 

이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 것 

 

주요 이벤트 객체 

이벤트를 받고 그 이벤트 listenr를 가질 수 있는 객체에 의해 구현된 인터페이스

EventTarget

이벤트를 받고 그 이벤트 listener를 가질 수 있는 객체에 의해 구현된 인터페이스

 

주요 이벤트 객체 

이벤트를 받고 그 이벤트 listenr를 가질 수 있는 객체에 의해 구현된 인터페이스

 

 

 

 

KeyboardEvent 인터페이스

UI event

keyboardEvent

MouseEvent

FocusEvent

 

이벤트 핸들러 

객체의 이벤트 속성값에 대입

이벤트를 등록하는 가장 쉬운 방법

html 태그에서 이벤트의 속성을 이용하여 등록 

ex) onclick()

권장하지 않는 방식

 

set attribuute

 

 

이벤트 등록

인라인 이벤트 핸들러 방식

<button type="button" onclick="fun1();">확인1</button>

function fun1() {
	alert("클릭1");
}

 

인라인 이벤트 프로퍼티 방식

<button type="button" class="btn">확인</button>

btn.onclick = function() {
			alert("클릭1");
		}
		
		// 두 번째 이벤트 등록 
		btn.onclick = () => alert("클릭2");

첫 번째 이벤트는 실행되지만 두 번째 이벤트는 실행되지 않는다.

변수 x에 10을 넣고 20을 넣으면 최종적으로 20이 저장되는 것과 같은 개념이다. 

가장 간단한 방법이지만 권장되지 않는 방법이다. 

 

<button type="button" class="btn">확인</button>

onclick 사용XXXXXX

 

const btn = document.querySelector(".btn");
	
// 둘 다 실행 
// 첫 번째 바인딩 
btn.addEventListener("click",function(){
		alert("클릭1");
});
	
// 두 번째 바인딩
btn.addEventListener("click",()=> alert('클릭2'));

 

 

동적으로 이벤트가 등록되는 방법이다. 

가장 권장되는 방법이다. 

첫 번째 바인딩과 두 번째 바인딩 모두 실행된다. 

 

KeyboardEvent 인터페이스

UI event

keyboardEvent

MouseEvent

FocusEvent

 

이벤트 핸들러 

객체의 이벤트 속성값에 대입

이벤트를 등록하는 가장 쉬운 방법

html 태그에서 이벤트의 속성을 이용하여 등록 

ex) onclick()

권장하지 않는 방식

 

set attribuute