| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
- 백준 1449 노드
- 백준 4796 자바스크립트
- 백준 1449 타입스크립트
- 백준 2503 타입스크립트
- 백준 1449
- 백준 1449 javascript
- 백준 2503 nodejs
- 백준 4796 nodejs
- 백준 1018 타입스크립트
- 백준 1018 javascript
- 알고리즘
- CSS
- 백준 4796 캠핑
- 백준 11047 nodejs
- 백준 1018 typescript
- 백준 11047 자바스크립트
- 백준 4796 javascript
- 백준 1449 자바스크립트
- 백준 11047 타입스크립트
- 백준 11047 typescript
- 백준 2503 javascript
- 백준 4796 타입스크립트
- 백준 1018 자바스크립트
- JavaScript
- 백준 1018 nodejs
- 백준 2503 typescript
- 백준 11047 javascript
- 백준 2503 자바스크립트
- 백준 10448 javascript
- 백준 1449 nodejs
- Today
- Total
POTATO THAT WANT TO BE HUMAN
[JavaScript] 이벤트 트리거 dispatchEvent() 본문
일반적인 이벤트는 사용자가 클릭을 하는 것과 같은 상호작용을 하면 발생합니다. 하지만 실제로 Click이 발생하지 않았지만, 이벤트 핸들러를 호출하고 싶다면 어떻게 해야할까요?
이럴 때 사용할 수 있는 것이 Event trigger 입니다.
이벤트 트리거는 방아쇠를 당기면 총알이 나가는 것처럼 어떠한 행위를 했을 때 원하는 이벤트를 실행할 수 있도록 하는 방식입니다. 이벤트 트리거를 위해서는 dispatchEvent를 사용합니다.
( 다른 곳에서 원하는 특정 이벤트를 발생시킬 수 있음 )
dispatchEvent는 이벤트를 강제로 발생시킵니다.
원래의 이벤트는 사용자가 가서 클릭을 하는 등 상호작용을 해야 발생하는데, dispatch는 그렇지 않고 강제로 이벤트를 발생시킵니다. 단, 원하는 요소에 addEventListener() 가 연결이 되어 있어야 작동합니다. 이벤트가 연결되어 있지 않은 경우 바인딩이 되지 않기 때문에 작동하지 않습니다.
예를 들어보겠습니다.
브라우저의 종류에 따라 기본 UI 스타일이 다른 엘리먼트가 존재합니다. 대표적으로 <input type="file" /> 태그 같은 경우 아래와 같이 Chrome과 IE 에서의 출력 디자인이 다릅니다.
공통된 style의 제공을 위해 Input 태그가 아닌 다른 버튼을 추가로 만듭니다. 해당 버튼을 클릭시, 클릭이벤트를 원하는 태그에 연결해주는 방식이 이벤트 트리거입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DispatchEvent</title>
<style>
#file-click-btn {
border: 1px solid #f08080;
background-color: #ff6347;
padding: 6px 12px;
border-radius: 5px;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<input type="file" id="file-ele">
<input type="button" id="file-click-btn" value="파일선택">
</body>
</html>
오른쪽 빨간 버튼을 누르면 원래의 파일선택 버튼을 누른 것과 같은 이벤트가 발생하도록 dispatchEvent를 작성합니다.
dispatchEvent를 사용하기 위해서는 아래와 같이 먼저 event객체를 통한 이벤트가 만들어져있어야합니다.
let event = new Event('click');자바스크립트 코드를 보겠습니다.
let fileEle = document.querySelector('#file-ele');
let fileBtn = document.querySelector('#file-click-btn');
fileBtn.addEventListener('click', () => {
// 이벤트 객체 만들기
let event = new MouseEvent('click', {
'view' : window,
'bubbles' : true,
'cancelable' : true
})
// event 객체를 file에 전달
fileEle.dispatchEvent(event);
})코드 추가 후 새로 만든 빨간 버튼을 누르게 되면 원래 파일input을 눌렀을 때와 동일하게 동작합니다.
참고 자료
'FRONTEND > JavaScript' 카테고리의 다른 글
| [JavaScript] 비구조화 할당 (0) | 2022.06.10 |
|---|---|
| [JavaScript] 브라우저와 요소의 크기(너비, 높이) 구하기 (0) | 2022.06.02 |
| [JavaScript] 변수와 호이스팅 (0) | 2022.05.24 |
| [JavaScript] script 태그 삽입 위치(head or body) (0) | 2022.05.22 |
| [JavaScript] 배열 내 저장된 객체의 중복 제거 (0) | 2022.04.28 |
