정보실

웹학교

정보실

javascript JavaScript의 커스텀 이벤트

본문

우리가 작성하는 많은 코드는 이벤트에 반응합니다. 마우스 클릭 또는 키보드 이벤트와 같은 I / O 이벤트 HTTP 호출을 들을 때 네트워크 이벤트


그것들을 내가 내장 이벤트라고 부릅니다.


JavaScript에서 사용자 정의 이벤트를 작성하고 브라우저 및 Node.js에서 작동 방식을 변경할 수 있습니다.


프론트 엔드에서는 브라우저가 제공하는 Event 객체를 사용합니다.


const anEvent = new Event('start');


다음을 사용하여 이벤트를 트리거 할 수 있습니다


document.dispatchEvent(anEvent)


이 경우 이벤트 리스너가 트리거 됩니다.


document.addEventListener('start', event => {   
  console.log('started!')
})


이벤트 대신 CustomEvent 내장 개체를 사용하여 사용자 지정 데이터를 보낼 수 있습니다.이 개체는 두 번째 매개 변수로 개체를 허용합니다.


const anotherEvent = new CustomEvent('start', {
  detail: {
    color: 'white'
  }
})


CustomEvent를 사용하면 이벤트 리스너에서 event.detail을 사용하여 데이터를 이벤트 객체에 요청할 수 있습니다 (다른 속성은 사용할 수 없음).


document.addEventListener('start', event => {   
  console.log('started!')
  console.log(event.detail)
})


백엔드 측에서 Node는 이벤트 모듈을 사용하여 유사한 시스템을 구축 할 수 있는 옵션을 제공합니다.


이 모듈은 특히 이벤트 처리에 사용할 EventEmitter 클래스를 제공합니다.


당신은 그것을 사용하여 초기화


const EventEmitter = require('events')
const eventEmitter = new EventEmitter()


이 객체는 많은 on 및 emit 메소드를 노출합니다.


  • emit는 이벤트를 트리거 하는 데 사용됩니다
  • on은 이벤트가 트리거 될 때 실행될 콜백 함수를 추가하는 데 사용됩니다

예를 들어 시작 이벤트를 만들고 샘플을 제공 할 때 콘솔에 로그인하여 이에 대응합니다


eventEmitter.on('start', () => {
  console.log('started')
})


우리가 실행할 때


eventEmitter.emit('start')


이벤트 핸들러 함수가 트리거되고 콘솔 로그를 얻습니다.


emit ()에 추가 인수로 전달하여 인수를 이벤트 핸들러에 전달할 수 있습니다.


eventEmitter.on('start', (number) => {
  console.log(`started ${number}`)
})

eventEmitter.emit('start', 23)


Multiple arguments:


eventEmitter.on('start', (start, end) => {
  console.log(`started from ${start} to ${end}`)
})

eventEmitter.emit('start', 1, 100)


https://flaviocopes.com/javascript-custom-events/ 

페이지 정보

조회 19회 ]  작성일20-06-30 22:06

웹학교