-
[JS/CustomEvent] 자바스크립트, 커스텀 이벤트 생성하기Frontend 2020. 3. 7. 13:33
회사에서 이번에 새로 맡은 업무를 기획중인데,
Native 앱이 웹뷰에 뭔가를 요청할때마다 웹뷰에서 이벤트가 trigger되도록 만들어야해서 어떻게 할지 엄청 고민을 많이 했었다.
웹뷰가 Native Client에 Data를 요청하는 프로세스는 이미 구현이 되어있는데,
Native Client가 필요할때마다 웹뷰에게 특정 이벤트를 실행하도록 요청하는 프로세스가 구현이 안되어있다.
https://developer.android.com/guide/webapps/webview?hl=ko
WebView에서 웹 앱 빌드 | Android 개발자 | Android Developers
웹 애플리케이션 또는 웹페이지만 클라이언트 애플리케이션의 일부로 제공하려는 경우 WebView를 사용하면 됩니다. WebView 클래스는 Android의 View 클래스의 확장으로, 웹페이지를 활동 레이아웃의 일부로 표시할 수 있게 해 줍니다. 탐색 컨트롤이나 주소 표시줄 등 완전히 개발된 웹브라우저의 기능은 전혀 포함되어 있지 않습니다. WebView의 모든 작업은 기본적으로 웹페이지를 표시하는 것입니다. 일반적으로 WebView를 사용하는 것이 도움이
developer.android.com
Native 앱과 웹뷰가 어떻게 소통하는지 열심히 찾아보니,
일단 Native 앱에서 웹뷰 내부에 선언된 JavaScript 함수를 실행하는 방식으로 웹뷰에게 무언가를 전달할 수 있다.
그렇다면 웹뷰에서 어떤 함수를 정의한 다음에,
Native가 그걸 실행할때마다 웹뷰 컴포넌트가 mount된 상태에서 등록된
특정 이벤트 함수가 실행되도록 해야했다.
그래서 찾다가 발견한 CustomEvent!
우리가 흔히 사용하는 click, change, submit 등의 이벤트와 마찬가지로 CustomEvent를 생성해서 사용할 수 있다는 것!
이 CustomEvent로 생성한 이벤트를 dispatch해주는 웹뷰 함수를 Native가 실행해주면
Native가 원할때마다 웹뷰의 이벤트를 trigger할 수 있지 않을까? 하는 생각을 하게 되었다.
new CustomEvent()
event = new CustomEvent(typeArg, customEventInit);CustomEvent는 생성자 함수이며 위와 같이 사용하여 이벤트 instance를 생성한다.
2개의 Parameters를 가지는데, 다음과 같다.
- typeArg: 이벤트 이름
- customEventInit: Optional한 속성으로 'detail'이라는 field를 가지고 있는 객체이다.
- detail: 이 속성은 readonly 속성으로, 처음 이벤트 생성할 때에만 값을 넣어줄 수 있다. 만약에 아무것도 넣지 않으면 null이 할당된다.
customEvent는 익스플로러에서는 지원하지 않지만
다음과 같은 polyfill을 사용하면 익스플로러 9 이상의 브라우저에서는 사용할 수 있다.
(function () { if ( typeof window.CustomEvent === "function" ) return false; function CustomEvent ( event, params ) { params = params || { bubbles: false, cancelable: false, detail: null }; var evt = document.createEvent( 'CustomEvent' ); evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ); return evt; } window.CustomEvent = CustomEvent; })();EventTarget.addEventListener()
EventTarget.addEventListener(typeArg, listener);이제 아까 생성한 이벤트 이름을 넣어서 이벤트를 등록해주어야 한다.
이렇게 되면 나중에 이벤트가 dispatch될 때마다 등록된 listener 함수가 실행된다.
EventTarget.dispatchEvent()
EventTarget.dispatchEvent(event);아까 위에서 생성된 이벤트 instance를 dispatchEvent라는 함수의 인자로 넣어 trigger할 수 있다.
dispatchEvent 함수가 실행되면, addEventListener로 등록된 이벤트가 발생하여
listener 함수가 실행되는 구조이다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="inputText" readonly /> <button type="button" id="btnMessage">Toggle Message</button> <script> const $input = document.querySelector('#inputText'); const $btn = document.querySelector('#btnMessage'); const event = new CustomEvent('setDefaultMessage', { detail: { message: 'sample message' } }); $input.addEventListener('setDefaultMessage', function(e) { $input.value = $input.value ? '' : e.detail.message; }); $btn.addEventListener('click', function(e) { $input.dispatchEvent(event); }); </script> </body> </html>아주 간단한 예제 코드를 만들어보았다.
setDefaultMessage라는 이름의 이벤트를 생성하여 버튼을 클릭할때마다 이벤트가 실행되도록 만들었다.
반응형'Frontend' 카테고리의 다른 글
[JS] 자바스크립트, Nullish Coalescing Operator (다른 논리 연산자와 비교) (252) 2020.03.12 [JS] 자바스크립트, Optional Chaining (252) 2020.03.11 [TypeScript] 타입스크립트 - Generic (252) 2020.03.03 [TypeScript] 타입스크립트 - Type assertions, Type alias (252) 2020.03.02 [TypeScript/3.8] 타입스크립트 3.8에서 바뀐 것들에 대하여 (252) 2020.03.01 COMMENT