[javascript] 이벤트 EventTarget / 이벤트 등록 제거 방법

[javascript] 이벤트 EventTarget / 이벤트 등록 제거 방법

✔️ 이벤트란?

: HTML 이벤트는 HTML 요소에서 발생할 수 있는 상황으로, 자바스크립트가 HTML 페이지에서 사용될 때 자바스크립트는 이런 이벤트에 반응한다.

: 브라우저는 이벤트를 감지할 수 있으며, 이벤트 발생 시에는 통지해준다. 이 과정에서 사용자와 웹 페이지는 상호작용이 가능해진다.

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

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

: 이때, 비동기식 이벤트 중심의 프로그램 모델이라고 한다.

드리븐 방식이란, 모든 애플리케이션이 이벤트 방식으로 동작하는 것이다. 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 것을 의미한다.

✔️ 동시성 모델과 이벤트 루프

: 자바스크립트는 코드 실행, 이벤트 수집과 처리, 큐에 놓인 하위 작업들을 담당하는 이벤트 루프에 기반한 동시성 모델을 가지고 있다.

: 브라우저는 단일 스레드에서 이벤트 드리븐 방식으로 동작한다.

: 단일 스레드 환경은 하나의 작업만을 처리할 수 있다는 것을 의미한다. 하지만 실제로 동작하는 웹 애플리케이션은 많은 task 가 동시에 처리되는 것처럼 느껴지는데, 이처럼 동시성을 지원하는 것이 이벤트 루프이다.

✨ 동시성을 지원하기 위해 필요한 비동기 요청 처리는 자바스크립트 엔진을 구동하는 환경 즉, 브라우저(or Node.js)가 담당한다. 

📓 자바스크립트 엔진

: 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다.

: 자바스크립트 엔진은 표준적인 인터프리터로 구현하거나, 자바스크립트 코드를 byte 코드로 컴파일 하는 저스트 인타임 컴파일로도 구현할 수 있다.

📓 자바스크립트 엔진 구성요소

- Call Stack

: 작업이 요청되면 요청된 작업은 순차적으로 Call Stack 에 쌓이게 되고 순차적으로 실행된다.

: 자바스크립트는 단일 스레드 프로그래밍 언어이므로 단 하나의 Call Stack 을 사용한다. 

: 동적으로 생성된 객체 인스턴스가 할당되는 영역이다.

- Event Queue 

: 비동기 처리 함수의 콜백 함수, 비동기식 이벤트 핸들러, Timer 함수의 콜백 함수가 보관되는 영역이다.

: 이벤트 루프에 의해 특정 시점에 순차적으로 Call Stack 으로 이동되어 실행된다.

- Event Loop 

: Call Stack 내에서 현재 실행중인 task 가 있는지 그리고 Event Queue 에 task 가 있는지 반복하여 확인한다.

✔️ EventTarget 

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

: DOM 의 기본 원자 Node는 EventTarget 인터페이스를 상속 받는다.

📓 인터페이스

: DOM 내에 위치한 이벤트를 나타낸다.

⭐⭐ preventDefault !! 이벤트를 취소하는데, 연속된 이벤트가 실행되지 않도록 할 때 쓰임... 뒤에 더 자세한 내용이 나온다.

✔️ 인라인 이벤트 핸들러 방식

: 라인 안에 이벤트를 넣는 방식

<p><button type="button" onclick="fun1();">확인1</button> </p>
<p><button type="button" onclick="fun1(); fun2();">확인2</button> </p>
 
<script type="text/javascript">
function fun1() {
	alert("클릭1")
	
}
 
function fun2() {
	alert("클릭2")
	
}

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

: 프로퍼티로 인라인 class 에 이벤트를 주는 방식

but, 바인딩은 마지막 이벤트가 최종적으로 바인딩된다.

<p><button type="button" class="btn"> 확인 </button> </p>
 
<script type="text/javascript">
const btn = document.querySelector(".btn");
 
//첫번째 이벤트 바인딩  => 실행안됨. 마지막 것만 바인딩됨
btn.onclick = function() {
	alert("클릭 !")
}
 
//두번째 이벤트 바인딩
btn.onclick = () => alert("클릭 2!!");
 
 
 
 
</script>

✔️ 이벤트 등록 : addEventListener

: 이벤트를 동적으로 저장해야할 때 사용하는데, 보통 가장 많이 쓰는 이벤트 핸들러인듯하다. 중요!💖

<p><button type="button" class="btn">확인</button> </p>
 
<script type="text/javascript">
const btn = document.querySelector(".btn");
 
//이벤트를 동적으로 저장해야할 때, 
//첫번째 바인딩
 
//click : 이벤트 이름을 쓴 것. onclick 아니다.
btn.addEventListener("click", function(){
	alert("클릭 !")
});
 
//두번째 바인딩
btn.addEventListener("click", function(){
	alert("클릭 2")
});
 
 
</script>

💡 inline 에서 이벤트를 등록할 때, onclick 이었지만, 이벤트 등록할 때는 click 으로, onclick 으로 쓰지 않도록 주의하자.

첫번째 이벤트, 두번째 이벤트 모두 순차적으로 바인딩되었다.

✔️ 이벤트 제거

👩‍💻 인라인 일 때,

function sub(obj) {
	alert("한번만..")
	// click 이벤트 속성 제거
	obj.removeAttribute("onclick");
}

👩‍💻 프로퍼티 방식일 때

null!

const btn1 = document.querySelector(".btn1");
 
btn1.onclick = function() {
	alert("한번만..!");
	
	btn1.onclick = null;
}

👩‍💻 removeEventListener

const btn2 = document.querySelector(".btn2");
const btn3 = document.querySelector(".btn3");
 
const fn = () => alert("안녕...");
 
//등록
btn2.addEventListener("click", fn);
 
//제거
btn3.addEventListener("click", ()=> btn2.removeEventListener("click",fn))