javaScript. (20) Event Listener / Callback

📌 Event Listener

 

- 해당 이벤트에 대해 대기중인 것. (상시 Listening 중)

- 이벤트가 발생했을때 등록했던 이벤트 리스너가 실행됨.

 

 

window.onload = function () {
   alert('I\'m loaded');
};

 

- 대표적인 이벤트리스너 코드임.

- window가 load 될때 function 부분이 실행되는 것.

 

이벤트리스너는 항상 on + '이벤트명'으로 명명된다.

예>  onclick

 

** 자주 쓰이는 이벤트 목록

onchange	객체 내용이 바뀌고 / 포커스를 잃을 때
onclick	객체를 클릭할 때
ondblclick	객체를 더블클릭할 때
onerror	에러가 발생했을 때
onfocus	객체에 포커스되었을 때
onblur	객체가 포커스를 잃을 때
onkeydown	키를 눌렀을 때
onkeypress	키를 누르고있을 때
onkeyup	키를 눌렀다 뗐을 때
onload	문서나 객체가 로딩되었을 때
onmouseover	마우스가 객체 위에 올라왔을 때
onmousedown	마우스가 객체 바깥으로 나갔을 때
onreset	reset 버튼을 눌렀을 때
onresize	객체의 크기가 바뀌었을 때
onscroll	스크롤바를 조작할 때
onsubmit	폼이 전송될 때

 

javaScript. 이벤트(on__)의 종류

그 외에 다양한 이벤트의 종류를 위 글🔺 에 포스팅해두었다.

 

 

 

window 말고도 여러 태그에 각각 이벤트를 설정할 수 있다.

(예- html의 <form>태그나 / <button>태그 / <a>태그 등 ... )

 

 

이벤트리스너를 등록하는 방법에는

 

1. on(Event) 이용 >> 대입연산자로 function을 대입한다.

 

document.getElementById('clickMe').onclick = function () {
	console.log('clicked!');
};

 

2.  addEventListener(Event, function)

- 여러 이벤트를 등록할 수 있고, 특정 이벤트를 제거할 수도 있어서

on으로 이벤트리스너를 등록하는 것 보다 장점이 많다.

 

function onClick() {
	console.log('clicked!');
}

function onClick2() {
	console.log('또다른 이벤트');
}


document.getElementById('clickMe').addEventListener('click', onClick);  
document.getElementById('clickMe').addEventListener('click', onClick2);   // 2개 연결 가능

document.getElementById('clickMe').removeEventListenr('click', onClick2);   // 하나 제거

- click 위치는 해당 이벤트명 (click, submit 등)을 입력하면 된다.

 

 

 

📌 Callback

- 위 두 코드에서 function 부분을 부르는 것을 콜백(callback)이라고 한다.

- 일반적으로 함수는 ()로 호출하는데, 이와는 다르다. >> 다시 ㅡ 알려주는 callback이다.

 

- 꼭 이벤트가 아니더라도, 콜백을 활용할 수 있다.

var cbExample = function(number, cb) { 
  setTimeout(function() {           // setTimeout 메서드 ㅡ ❗ 비동기 처리를 위해
    var sum = 0;
    for (var i = number; i > 0; i--) {     // for문 ㅡ number로 받은 값 이용
      sum += i;
    }
    cb(sum);     // sum은 cbExample함수에서 cb를 받는 것. (cb = 콜백을 받는 부분)
  }, 0);
};
cbExample(10, function(result) {     // cb로 함수를 넣는다.
  console.log(result);        // 1부터 10까지의 합 = 55
}); // 55
console.log('first');

- 콜백을 받는 부분인 cb에서 함수를 인자로 받는다.

>> 그 함수가 콜백함수로 등록되어, 계산이 끝난 후에 실행된다.

- 콜백 등록만 해놓으면 알아서 계산이 끝난 후 알려줌

 

first가 55보다 아래에 있지만, first를 먼저 콘솔에 로그한다.

 

setTimeout을 사용하면 비동기적으로 실행된다. >> 콜백

- delay를 설정 안해도 (즉, 0초로 해도) 비동기적으로 실행된다. 

💡 setTimeout()
setTimeout(function[, delay]);
- 타이머 실행 후 실행함. 
- delay 뒤에 arg1, arg2, ... 를 적어 추가로 매개변수를 함수에 전달할 수 있다.

 

Syncronous (동기식)	요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식
Asynchronous (비동기)	요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식

자바스크립트는 기본적으로 동기적인 언어이므로, 응답을 받아야 다음 동작이 실행된다.

>> 그러나, 비동기적 콜백 을 이용해서 비동기식으로 조작할 수 있다.

 

 

그 외에도 콜백은 다양한 곳에서 사용된다.

예> forEach나 map등 

 

 

만약, cbExample함수가 10초가 소요되는 일이라면,

이 함수가 끝나고 다음 코드가 실행될 때 까지 10초나 기다려야한다.

>> 콜백을 등록해두고, 바로 다음코드로 넘어가서 - 일이 완료되면 알려주도록 만들면 해결됨.

 

즉, 콜백은

언제 끝날지 모르는 동작에 대해 결과를 전달받을 때 유용하다. 

>> 계속 기다릴 필요가 없어지니까.

 

 

 

 

 

💡 이벤트 버블링

- DOM에 연결한 객체는 버블링이 일어난다.

 

** 버블링 : 자신의 이벤트가 부모에도 전달됨.

 

<div id="first"><div id="second"><div id="third"></div></div></div>

위와 같은 구조가 있을때,

div #third를 클릭하면 ㅡ second, first 순으로 같은 이벤트가 발생한다.

부모태그(직계)	#second
조상태그(상위)	#first

---

 

💡 이벤트 객체

 

- DOM에 대한 이벤트에 연결한 함수는 이벤트 객체를 매개변수로 사용 가능.

- 이벤트 객체는 Event에 대한 정보와 조작 메서드들이 들어있다.

 

 

 

/// 방법 1 - on 이용
document.getElementById('btn').onclick = function (event) {
    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();
}



/// 방법 2 - addEventListener 이용
document.getElementById('btn').addEventListener('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();
});

 

1) event.preventDefault()

- 태그의 기본 동작을 막아주는 역할

예> a 태그 - 링크 이동 / form 태그 - 폼 내용 전송

 

2) event.stopPropagation()

- 부모에게 이벤트가 전달되지 않도록 함 ( = 버블링 현상 방지 )

 

if> 여러개의 클릭 이벤트를 동시에 연결한 경우

stopPropagation으로 클릭 이벤트를 막아도 (부모에게 버블링x)

다른 클릭 이벤트는 실행된다. (부모 말고 다른 클릭 이벤트는 클릭됨)

 

>> 이때, stopImmediatePropagation 메서드를 사용하면,

부모에게는 어떤 이벤트도 버블링되지 않으면서 다른 클릭 이벤트도 실행되지 않는다.

3) event.stopImmediatePropagation()

- 부모에게 버블링되지 않고 / 다른 해당 이벤트도 막아줌

>> but. 종류가 다른 이벤트는 막지 못한다. (예 - click이벤트라면 submit은 막지 못함)

 

 

---

 

 

** 그 외 event 객체의 정보들

event.target	이벤트가 발생한 태그(의 정보)
event.pageX	클릭한 좌표
event.pageY
event.key	어떤 키를 눌렀는지

 

 

 

---

REFERENCE

 

(JavaScript) 이벤트 리스너와 콜백(event listener, callback)

 

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!