[javascript] 이벤트 EventTarget / 이벤트 등록 제거 방법
by mini_min[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))
'JavaScript' 카테고리의 다른 글
[javascript] 이벤트 전파 - preventDefault / stopPropagation / Bubbling과 Capturing (1) | 2022.09.25 |
---|---|
[javascript] form 관련 이벤트 this / currentTarget / target / srcElement (0) | 2022.09.25 |
[javascript] window open 속성 - 팝업창 띄우기 / html 창 띄우기 / 색 변경 (0) | 2022.09.25 |
[javascript] location 객체 / navigator 객체 (0) | 2022.09.25 |
[javascript] 클래스(class) 선언 / 상속 / 프라이빗 (2) | 2022.09.25 |
블로그의 정보
개발자 미니민의 개발로그
mini_min