728x90

✨ 평소 DOM을 이용해 Event를 작성하곤 한다. 그 이벤트는 어떻게 관리될까? class를 이용해서 event library를 만들어보자.

1. Button을 click하면 'Hi there!'이라고 consol에서 출력되도록 작성해보자.
2. 브라우저(html file)를 열자마자 자동으로 button을 click하는 trigger를 발생시켜보자
3. button의 click event를 제거해보자

아래 HTML파일 script tag 부분에 작성하면 된다.

<head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
</head>
<body>
<h1>Click the button</h1>
<button>Me!</button>
<script>
여기에 작성
</script>
</body>

편의상 jQuery로 작성해보겠다.

<head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
</head>
<body>
<h1>Click the button</h1>
<button>Me!</button>
<script>
$('button').on('click', () => {
console.log('Hello');
});
 
$('button').trigger('click');
 
$('button').off('click');
</script>
</body>


.on으로 click event를 등록하고, .trigger로 click event를 자동 실행하고, .off로 click event를 제거하였다.

이 event들은 어떻게 관리될까? class를 이용해서 event를 관리하는 library를 작성해보자

Event Library class

class를 이용해 event library를 작성하면 위와 같이 작성할 수 있다.

생성자(constructor)를 이용해 object(map)을 선언해주고, on(), trigger(), off() method를 실행하며
각 event(key)마다 callback(value)을 넣어주면 된다.
또한, callback은 여러 개가 들어갈 수 있으므로 배열로 선언해주면 된다.

on()은 이벤트 등록을 위한 기능이므로, 해당 event가 있다면 push, 없다면 새로 key를 등록해준다.

trigger()는 이벤트를 실행시켜주므로, for...of를 이용해 obj안에 등록되어 있는 해당 event를 ()를 통해 실행시켜준다.

off()는 이벤트를 제거해주므로, delete를 이용해 obj안에 등록되어 있는 해당 event를 제거해주면 된다.

우리는 평소 사용 방법만 알면 event를 쉽게 등록하고 사용하거나 제거할 수 있다.
하지만, 우리 눈에 보이지 않는 event는 어떻게 관리되는 지 위의 내용을 통해 조금이나마 이해할 수 있다.

추가) Vanilla JavaScript로 작성했을 때,

<head>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"
></script>
</head>
<body>
<h1>Click the button</h1>
<button>Me!</button>
<script>
// Vanilla JavaScript
const btn = document.querySelector('button');
 
function handleClickEvent() {
console.log('Hi there!');
}
 
btn.addEventListener('click', handleClickEvent);
 
btn.click();
 
btn.removeEventListener('click', handleClickEvent);
</script>
</body>

'JavaScript > JavaScript' 카테고리의 다른 글

Prototypal Inheritance(프로토 타입 이해하기)  (0) 2020.01.27
Hoisting(호이스팅)  (0) 2020.01.24

+ Recent posts