728x90
Javascript - 이벤트 트리거 (event Trigger) .dispathEvent()
브라우저마다 기본 UI 스타일이 다른 엘리먼트가 존재한다.
예를들어 <input type="file" /> 태그 같은 경우에도
Chorme과 IE10 에서의 출력 디자인이 다르다.
공통된 style의 제공을 위해
Input 태그가 아닌, 다른 버튼을 추가로 만들어
해당 버튼을 클릭시, 클릭 이벤트를 원하는 태그에
연결해주는 방식을 현업에서 많이 사용하고 있는데,
해당 방식을 Event Trigger 라고 한다.
샘플 예제 ↓
[HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Trigger Example</title>
<style>
#file-click-btn {
border : 1px solid lightcoral;
background-color: tomato;
padding : 6px 12px;
border-radius: 5px;
color: white;
}
#file-click-btn:hover {
background-color: lightsalmon;
}
</style>
</head>
<body>
<input type="file" id="file-element" />
<input type="button" id="file-click-btn" value="파일선택"/>
<script src="eventTrigger.js"></script>
</body>
</html>[결과 출력 (트리거 적용 전)]
[Javascript]
let fileElem = document.querySelector('#file-element');
let fileBtn = document.querySelector('#file-click-btn');
fileBtn.onclick = function(e){
//이벤트 객체 만들기
let event = new MouseEvent('click',{
'view': window,
'bubbles' : true,
'cancelable' : true
});
//이벤트 객체를 file에 전달
fileElem.dispatchEvent(event);
}[결과 출력 (트리거 적용 후)]
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 이벤트 전파 방지 stopPropagation() (0) | 2021.02.03 |
|---|---|
| [Javascript] 이벤트의 추가 addEventListener() (0) | 2021.02.02 |
| [Javascript] 기본 이벤트 삭제 event.preventDefault() (0) | 2021.02.01 |
| [Javascript] 노드복사 importNode (3) | 2021.02.01 |
| [Javascript] 부모 태그 찾기 .parentElement (0) | 2021.01.31 |
댓글