Javascript 이벤트 - 브라우저 및 노드에서

이벤트란?

Javascript 이벤트는 특정 프로세스가 실행되는 "시기"를 제어하는 ​​훌륭한 방법입니다. 이벤트의 필수 워크플로는 다음과 같습니다.

이벤트 이름(예: "click")과 이벤트 핸들러(이벤트 발생 시 실행되는 함수)를 사용하는 리스너가 생성됩니다.

해당 이름의 이벤트를 내보내거나 트리거하는 일이 발생합니다.

리스너는 반복되며 리스너가 동일한 이름의 이벤트에 연결되면 함수가 실행됩니다.

이 포스트에서 이야기하고 싶은 것은...

내장 브라우저 이벤트(DOM 이벤트)

사용자 정의 브라우저 이벤트

노드의 사용자 정의 이벤트

내장 브라우저 이벤트

웹 사이트를 탐색할 때 발생하는 수십 가지 기본 이벤트가 있습니다. 클릭 호버 등. 브라우저의 모든 개별 요소는 이러한 이벤트를 수신할 수 있습니다. 그렇게 하려면 이벤트를 수신할 리스너를 만들어야 합니다.

// Grab first button and save it in a variable
const button = document.querySelector("button")

//Add an listener to respond to clicks
button.addEventListener("click", event => {
  console.log("I happen when you click on the button")
})

그게 다야, 이제 그 버튼을 클릭할 때마다 그 기능이 실행될 것이다. 내가 "event"라는 함수 정의에 하나의 매개변수를 배치했음을 알 수 있습니다. 이는 모든 이벤트 핸들러 함수가 이벤트에 대한 모든 세부 정보를 포함하는 하나의 인수인 하나의 인수를 자동으로 전달하기 때문입니다.

이 개체를 이벤트 개체라고 하며 여러 가지 유용한 지원 기능과 속성을 가지고 있습니다.

// Grab first button and save it in a variable
const button = document.querySelector("button")

//Add an listener to respond to clicks
button.addEventListener("click", event => {
  // This gives us the element that this event belongs to
  console.log(event.currentTarget)

  //This gives us the element that initiated the event which may be different if this particular event was triggered by an interaction of a child element, this property would contain the child element.
  console.log(event.target)

  // This function prevents bubbling, means an event emitted/triggered on a child element will not trigger events on the parents. (A click event on a button won't trigger a click event on the div it is inside in, which would normally occur)
  event.stopPropagation()

  // This function would prevent any elements default behavior. This is primarily useful when submitting a form as by default forms refresh on every submit.
  event.preventDefault()

  // You can pull any information from the target element making it useful to store information in the element via attributes to be used in events.
  console.log(event.currentTarget.id) //the ID of the target element
  console.log(event.currentTarget.getAttribute("info")) //grab value of an "info" attribute
})

기본 제공 이벤트가 작동하는 방식이며 매우 강력할 수 있습니다. 맞춤형 이벤트를 통해 다음 단계로 나아갈 수 있습니다...

브라우저의 사용자 정의 이벤트

백엔드 및 프론트엔드 언어인 Javascript는 웹 페이지에서 DOM 상호 작용을 위해 빌드된 브라우저 API와 브라우저 외부의 프로세스(서버, 스크립트, 웹 스크래핑).

브라우저에는 사용자 정의 이벤트를 빌드하는 두 가지 방법이 있으며 이벤트 개체에 추가 정보를 포함할지 여부에 따라 다릅니다.

간단한 방법

이벤트를 생성하면 DOM 요소가 이벤트 수신을 시작할 수 있습니다.

//Create the Event
const myEvent = new Event("hug")

//Now it can be listened for
const teddyBearPhoto = document.querySelector("img#teddyBearPhoto")
teddyBearPhoto.addEventListener("hug", event => {
  alert("not so hard")
})

//The Event can be emitted/dispatched/triggered
const theBearHasBeenHugged = event => {
  teddyBearPhoto.dispatchEvent(myEvent)
}

이벤트 개체는 이벤트에서 사용하는 데 익숙한 모든 정보와 함께 이 사용자 지정 이벤트에 계속 전달됩니다. 이것은 고유한 상황에서 발생해야 하는 이벤트를 트리거하는 데 사용할 수 있습니다.

약간 덜 간단한 방법

이벤트 개체 내부에 일부 사용자 정의 정보를 포함하고 싶을 수도 있습니다. 아래 구문을 사용하면 사용자가 이벤트 개체에 정보를 추가할 수 있습니다.

//Create the Event
const myEvent = new CustomEvent("hug", { detail: "not so hard" })

//Now it can be listened for
const teddyBearPhoto = document.querySelector("img#teddyBearPhoto")
teddyBearPhoto.addEventListener("hug", event => {
  alert(event.detail)
})

//The Event can be emitted/dispatched/triggered
const theBearHasBeenHugged = event => {
  teddyBearPhoto.dispatchEvent(myEvent)
}

CustomEvent의 두 번째 인수에 있는 detail 속성을 사용하면 더 많은 정보를 전달할 수 있습니다. 많은 정보를 전달하려는 경우 세부 정보는 개체 또는 배열이 될 수 있습니다. 두 번째 인수는 다음과 같이 이벤트가 작동하는 방식에 대해 지정할 수 있는 다른 속성이 있기 때문에 개체입니다.

거품: 이벤트 거품 여부에 대한 부울

구성: 이벤트가 shadowDOM을 통해 버블링되는지 여부에 대한 부울

이것이 바로 브라우저의 커스텀 이벤트의 세계입니다!

NodeJS의 사용자 정의 이벤트

브라우저 밖에서 Javascript는 NodeJS의 세계에 있습니다. 노드에는 여러분이 알고 사랑하는 많은 라이브러리에서 많이 사용되는 사용자 지정 이벤트를 만들 수 있는 내장 이벤트 라이브러리가 있습니다. 아래 예를 참조하십시오 ...

//Bring in the events library
const events = require("events")

//create a new event emitter
const emitter = new events.EventEmitter()

//listen for a particular event
emitter.on("itHappened", obj => {
  console.log("I'm responded to the emitted event")
  console.log(obj.message)
})

//emit the event
emitter.emit("itHappened", {
  message:
    "Hello, I'm an argument passed during the event to the event handler",
})

멋진 점은 이벤트가 발생할 때 데이터를 전달할 수 있다는 것입니다. 첫 번째 인수 이후에 방출 함수에 대한 모든 인수는 순서대로 이벤트 핸들러에 전달됩니다. 하지만 이벤트에 응답하는 사람들이 필요로 하는 데이터와 함께 하나의 인수를 개체로 전달하는 것이 더 간단할 수 있습니다.

이벤트를 사용하는 경우

어떤 일이 발생했거나 끝날 때 신호를 보내다

약속 해결을 트리거하려면(이벤트가 발생할 때 해결 기능 실행)

열린 연결과 닫힌 연결을 알리기 위해(데이터베이스 라이브러리에서 많이 볼 수 있음)

오류를 알리기 위해

상상할 수 있는 모든 이유, 창의력을 발휘하십시오