JavaScript의 사용자 정의 이벤트

JavaScript는 이벤트로 가득 차 있습니다. 그것들은 이 언어의 가장 중요한 기능 중 하나입니다. 우리가 사용할 수 있는 이미 존재하는 기본 제공 이벤트가 많이 있습니다. 가장 인기 있는 것은 다음과 같습니다.
click, mousemove, keyup, change, submit 등. 전체 목록은 MDNdocumentation page에서 찾을 수 있습니다.

이벤트는 애플리케이션에 존재하는 요소와 상호 작용하거나 사용자가 수행하는 작업을 처리하는 좋은 방법입니다.

그러나 특정 코드 블록이 실행된 후 함수를 호출하려는 상황이 발생할 수 있습니다. 또는 기본 제공 이벤트 중 하나를 수동으로 트리거합니다. 이 기사에서는 Event() 및 CustomEvent() 생성자가 유용한 경우를 몇 가지 보여드리고자 합니다.

이벤트 생성 및 전달

다음 상황을 생각해보자. 스크립트를 사용하여 입력 값을 동적으로 변경합니다.

index.html

<input class="form__input" value="" />
<button class="form__change">Change data</button>

스크립트.js

const inputEl = document.querySelector('.form__input');
const buttonEl = document.querySelector('.form__change');

inputEl.addEventListener('change', e => {
  console.log('New value', e.target.value);
});

buttonEl.addEventListener('click', () => {
  inputEl.value = 'Example value';
});

이 상황에서는 change 이벤트가 트리거되지 않습니다. 수동으로 트리거해야 합니다. 여기에 Event() 생성자가 들어옵니다. 이벤트를 만드는 것은 간단합니다.
const newEvent = new Event('change');
이제 요소에서 이 이벤트를 전달해야 합니다.
inputEl.dispatchEvent(newEvent);Event() 생성자 매개변수에 입력한 이벤트 이름의 문자열은 addEventListener 에 제공된 것과 동일해야 합니다.
따라서 입력에서 change 이벤트를 트리거하려면 이 두 줄을 코드의 적절한 위치에 추가해야 합니다.

스크립트.js

buttonEl.addEventListener('click', () => {
  inputEl.value = 'Example value';
  const changeEvent = new Event('change');
  inputEl.dispatchEvent(changeEvent)
});

이제 입력에서 change 이벤트가 트리거됩니다.
위에서 언급했듯이 이벤트 이름은 JavaScript에 이미 내장된 이름으로 제한되지 않습니다.
이것은 Event() 생성자와 addEventListener 에서 동일한 이벤트 이름을 전달하는 한 작동합니다.

const myEvent = new Event('myEventName');
inputEl.addEventListener('myEventName', () => {...});

데이터로 이벤트 전달

그게 다가 아니다. 사용자 정의 이벤트를 생성, 전달 및 수신하는 것 외에도 이벤트 개체에 데이터를 추가할 수 있습니다. 이벤트와 함께 데이터를 전달하려면 CustomEvent() 생성자를 사용해야 합니다.

모달.html

<div class="modal">
  <div class="modal-content">
    Modal content...
  </div>

  <button class="modal-close">Close</button>
</div>

모달.js

const buttonElement = document.querySelector('.modal-close')
const modal = document.querySelector('.modal');

buttonElement.addEventListener('click', () => modal.dispatchEvent(closeModalEvent))

const userData = {
  name: 'Joe',
  lastName: 'Doe',
  age: 50
};

const closeModalEvent = new CustomEvent('closeModal', {
  bubble: true,
  detail: {
    modalId: 1,
    data: userData
  },
  cancelable: true
});

modal.addEventListener('closeModal', e => console.log(e.detail));

위의 예에서 디테일 객체는 버튼으로 모달이 닫힌 후 전달됩니다. 코드의 다른 위치에서 데이터를 수신하고 추가 작업을 처리할 수 있습니다.
보시다시피 detail 외에 두 개의 추가 속성을 전달했습니다. 이것들은:bubble - 이벤트가 상위 요소에 의해 캡처되어야 하는지 여부를 결정합니다. 기본값은 false 로 설정되어 있습니다.cancelable - 이벤트를 취소할 수 있는지 정의합니다. 기본값은 false 로 설정되어 있습니다.

브라우저 호환성

CustomEvent()는 Internet Explorer를 제외한 모든 주요 브라우저에서 사용할 수 있습니다. 이 브라우저의 경우 폴리필을 사용할 수 있습니다. 찾을 수 있습니다 on MDN .
기본적으로 createEvent 및 initEvent 를 사용해야 합니다.

var element = document.getElementByClassName('.input');
var customEvent = document.createEvent('Event');
customEvent.initEvent('customEvent');

element.addEventListener('customEvent', function(e) {
  console.log('Event', e)
}, false);

element.dispatchEvent(customEvent);

커스텀 EventEmitter 기능

이 기사의 끝에서 나는 사용자 정의 이벤트를 처리할 때 사용하는 간단한 솔루션을 보여주고 싶습니다.
나는 우리 코드의 다른 위치에서 여러 번 사용되는 기능에 대한 유틸리티 함수를 만드는 것을 선호합니다. 생성자를 사용하여 새 이벤트를 만드는 것을 방지하기 위해 코드에서 원하는 위치로 가져올 수 있는 개체를 만들었습니다.

이 코드는 사용자 지정 EventEmitter를 찾는 동안 찾은 몇 가지 사용자 지정 EventEmitter 자습서를 기반으로 합니다.

eventEmitter.js

const EventEmitter = {
  events: {},
  dispatch: function(event, data) {
    if (!this.events[event]) return
    this.events[event].forEach(callback => callback(data))
  },
  subscribe: function(event, callback) {
    if (!this.events[event]) this.events[event] = []
    this.events[event].push(callback)
  }
}

module.exports = { EventEmitter }

이벤트와 관련된 작업을 처리하려면 이 개체를 가져와서 해당 메서드를 사용하면 됩니다.

index.js

import { EventEmitter } from './../utils/eventEmitter.js';

const data = {
  name: 'Andy',
  age: 50
};

const emitChange = data => {
  EventEmitter.dispatch('change', data)
};

탐색.js

import { EventEmitter } from './../utils/eventEmitter.js';

EventEmitter.subscribe('change', event => {
  /* perform any action with event data */ 
});

결론

사용자 지정 이벤트를 사용하면 보다 유연하고 재사용 가능한 코드를 작성할 수 있습니다. 코드의 어느 부분을 실행해야 하는지 결정하고 모든 작업을 원하는 예측 가능한 방식으로 수행할 수 있습니다.