- 커스텀이벤트는 자바스크립트가 미리 갖고 있지 않은 이벤트를 개발자가 만드는 것을 말합니다.
- 자바스크립트는 클릭(click), 마우스관련(mouseenter 등)의 이벤트를 내장하고 있습니다.
- 하지만 개발하다보면 내장된 이벤트 외에 이벤트를 만들어야 하는 경우가 있습니다.
- 이처럼 자바스크립트가 내장하고 있지 않은 이벤트를 만드는 것이 Custom Event입니다.
1. 커스텀이벤트 생성하기
- 커스텀 이벤트를 생성하는 방법은 2가지가 있습니다.
const 인스턴스변수명 = new Event(type, options);
const 인스턴스변수명 = new CustomEvent(type, options);
- 그럼 2개의 차이를 봐야겠죠? 일단 간단하게 먼저 설명해 보겠습니다.
- CustomEvent 객체는 Event 객체를 상속받으며, CustomEvent 객체는 detail 이라는 프로퍼티를 가지고 있어 이벤트와 함께 전달되는 추가 정보를 나타낼 수 있습니다.
- 그냥 봐서는 이해가 잘 안 되기 때문에 한 개씩 보고, 각각의 options를 살펴보도록 하겠습니다.
1) Event 생성자
- 새로운 이벤트를 생성할때, 아래와 같이 Event() 생성자를 사용하여 새로운 Event 객체를 생성합니다.
const 인스턴스변수명 = new Event(type, options);
- 이때 type은 이벤트이름을 의미하는 문자열을 작성하면 됩니다.
- options는 객체이며 세부적인 키속성들을 갖고 있습니다.
## Event 생성자 options 속성
| 속성명 | 설명 | 값설명 |
| bubbles | 이벤트가 상위 요소로 전파되어야 하는지 여부를 설정 | Boolean, 기본값 - false |
| cancelable | 이벤트를 취소할수 있는지 여부를 설정 | Boolean, 기본값 - false |
| composed | Shadow DOM에서 실제 DOM으로 전파되어야 하는지 여부를 설정 | Boolean, 기본값 - false |
** ShadowDOM : 원래의 DOM 트리에서 완전히 분리된 고유의 요소와 스타일을 가진 DOM 트리입니다.
- 자세한 내용은 아래 주소를 참고해 주세요.
https://developer.mozilla.org/ko/docs/Web/API/Web_components/Using_shadow_DOM
shadow DOM 사용하기 - Web API | MDN
웹 컴포넌트의 중요한 측면은 캡슐화입니다. 캡슐화를 통해 마크업 구조, 스타일, 동작을 숨기고 페이지의 다른 코드로부터의 분리하여 각기 다른 부분들이 충돌하지 않게 하고, 코드가 깔끔하
developer.mozilla.org
2) CustomEvent생성자
- CustomEvent() 생성자를 사용해도 새로운 이벤트를 생성할 수 있습니다.
const 인스턴스변수명 = new CustomEvent(type, options);
- 이때 type은 이벤트이름을 의미하는 문자열을 작성하면 됩니다.
- options는 객체이며 세부적인 키속성들을 갖고 있습니다.
- 위의 Event()생성자와 bubbles , cancelable , composed 는 같습니다.
- 한 가지 더 새롭게 나오는데, 바로 detail 이라는 속성입니다.
- details : 이벤트 객체에 포함할 세부 정보를 나타내는 값을 설정합니다. 이때 객체로 표현하며, 기본값은 null입니다.
## 예시
const myTestEvent = new CustomEvent('myTestEvent', {
detail: {
name: 'myTestEvent',
type: 'mouse'
}
});
- 위와 같이 detail 이라는 속성을 작성할 수 있습니다.
2. 커스텀이벤트 전달하기
- Event를 발생시키려면, dispatchEvent() 메서드를 사용합니다.
## dispatchEvent() 문법
element.dispatchEvent(event);
- element는 DOM 요소를 의미하고, event는 Event()나 CustomEvent()로 생성된 인스턴스변수명을 작성하면 됩니다.
## 예시
const myTestEvent = new CustomEvent('myTestEvent', {
detail: {
name: 'myTestEvent',
type: 'mouse'
}
});
window.dispatchEvent(myTestEvent);
- 위에서 작성한 것은 window인 전역객체에 커스텀 이벤트를 전달한 것입니다.
1) Custom이벤트를 이용한 자동클릭 처리
- 그럼 클릭이벤트에서 경고창을 띄우겠습니다.
- 그 후 커스텀이벤트를 통해 클릭이벤트가 초기실행에 바로 실행되도록 처리하겠습니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - CustomEvent</title>
</head>
<body>
<button id="btn" onclick="alert('클릭')">자동클릭버튼</button>
<script>
const btn = document.getElementById('btn');
let autoEvent = new Event('click');
btn.dispatchEvent(autoEvent);
</script>
</body>
</html>
- 버튼이 클릭이벤트를 처리했습니다. 클릭하면 경고창이 뜨게 설정했습니다.
- 이때 새로운 이벤트를 autoEvent 라고 설정 후 이벤트타입은 새로운 이벤트가 아닌 click 으로 설정했습니다.
- 그래서 초기실행의 버튼에 autoEvent 를 전달하면 바로 클릭한 것과 같은 효과가 나타납니다.
## 결과 보기
- 그럼 초기실행 시 바로 경고창이 뜨는 것을 확인할 수 있습니다.
- 이렇듯 커스텀이벤트에서 기존 이벤트도 사용할 수 있습니다.
2) CustomEvent의 detail속성 사용하기
- 커스텀이벤트는 detail 속성을 통해 이벤트 관련 정보를 담을 수 있습니다.
- 이벤트가 실행될 때 이벤트 객체의 속성으로 detail 을 사용할 수 있습니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - CustomEvent</title>
</head>
<body>
<button id="btn">클릭</div>
<script>
const btn = document.getElementById('btn');
//커스텀이벤트생성
const welcomeEvent = new CustomEvent('welcomeEvent', {
detail: {
site: '오쌤의 니가스터디',
name: '홍길동'
}
});
//클릭시 커스텀이벤트 전달
btn.addEventListener('click', function(e) {
this.dispatchEvent(welcomeEvent);
});
//커스텀이벤트실행
btn.addEventListener('welcomeEvent', function(e) {
alert(`${e.detail.name}님 ${e.detail.site}에 오신 것을 환영합니다.`);
});
</script>
</body>
</html>
- 버튼을 클릭하면 커스텀이벤트가 전달돼서 실행하는 예제를 만들어 봤습니다.
- 이때 detail 속성에 담은 객체 속성값들을 반환받아보겠습니다.
## 결과 보기
- 버튼을 클릭하면 커스텀이벤트에 담은 경고창이 잘 뜹니다.
- 커스텀이벤트의 간단한 사용법만 봤습니다.
- 복잡하게 이벤트를 생성하는 것까지는 하지 않겠습니다.
- 추후에 리액트나 스벨트 등의 프레임워크에서 이 커스텀이벤트를 이용한 dispatch사용이 나옵니다.
- 일단 문법적인 것을 알고 있어야 코드를 이해할 수 있으므로 커스텀이벤트를 정리해 보세요.
'웹언어 > 자바스크립트 - ES6' 카테고리의 다른 글
| [ES6강좌] 14강 Fetch API사용하기 - 오쌤의 니가스터디 (2) | 2023.10.05 |
|---|---|
| [ES6강좌] 13강 async/await - 오쌤의 니가스터디 (0) | 2023.03.14 |
| [ES6강좌] 12강 Tagged Template literals - 오쌤의 니가스터디 (0) | 2023.03.02 |
| [ES6강좌] 11강 Template literals - 오쌤의 니가스터디 (0) | 2023.03.02 |
| [ES6강좌] 10강 JS Promise - 오쌤의 니가스터디 (0) | 2022.11.24 |
