자바스크립트를 사용하여 맞춤 이벤트 기능을 구현하는 방법

개요

맞춤 이벤트를 활용하기 어렵나요?

커스텀 이벤트를 활용하기 어려운 이유는 과거에 js가 모듈식으로 개발되지 않았고 협업이 거의 없었기 때문입니다. 이벤트의 본질은 소통 방식과 메시지이기 때문에 객체와 모듈이 여러 개 있을 때만 이벤트를 활용해 소통이 가능하다. 이제 모듈화를 통해 사용자 정의 이벤트를 사용하여 모듈 간 협업이 가능해졌습니다.

맞춤 이벤트는 어디에서 사용할 수 있나요?

이벤트의 본질은 일종의 메시지입니다. 이벤트 패턴은 본질적으로 관찰자 패턴을 구현한 것이므로 관찰자 패턴을 사용하는 경우에도 이벤트 패턴을 사용할 수 있습니다. 따라서

1. 대상 개체가 변경되면 여러 관찰자가 스스로 조정해야 합니다.

예: 요소 A를 클릭하면 요소 B는 마우스 위치를 표시하고 요소 C는 프롬프트를 표시하고 요소 D...

2 하위 모듈 공동 작업을 분리해야 합니다

예: A는 책임이 있습니다. 모듈 A의 경우 B는 모듈 B를 담당합니다. A가 실행을 마친 후에 모듈 B를 실행해야 합니다. 전통적인 작성 방법은 다음과 같은 메소드에 로직을 작성하는 것입니다.

function doSomething(){
  A();
  B();
}

이런 방식으로 필수의 클릭 기능은 확장할 때마다 수정해야 하기 때문에 확장이 쉽지 않습니다.

커스텀 이벤트 작성 방법

//1、创建事件
var clickElem = new Event("clickElem");
//2、注册事件监听器
elem.addEventListener("clickElem",function(e){
  //干点事
})
//3、触发事件
elem.dispatchEvent(clickElem);

dispatchEvent 메소드를 통해 elem에 의해 발생된 이벤트는 elem에 등록된 리스너만 모니터링할 수 있음을 알 수 있습니다. 이것은 매우 지루합니다. 자신에게 무엇을 해야 할지 알려주는 메시지를 보내세요.

맞춤 이벤트를 생성하려면 다음을 참조하세요. MDN: Creating_and_triggering_events

Application

JS 맞춤 이벤트에 대한 이전 설명에서 A에 등록된 리스너만 dispatchEvent를 통해 요소 A에 의해 트리거된 이벤트를 들을 수 있다는 것을 알고 있습니다. 방법.

우리가 원하는 효과는 다른 개체가 작업을 수행한 후 해당 변경 사항을 적용할 수 있도록 메시지를 보내는 것입니다. 이를 수행할 수 있는 방법은 없습니다. 공용 객체에서 이벤트를 수신하고 트리거할 수 있습니다.

예제 1: 여러 개체에 알림

요소 A를 클릭한 후 요소 B는 마우스 위치를 표시하고 요소 C는 프롬프트를 표시한다는 것을 인식하려면 다음과 같이 작성할 수 있습니다.

파일: a.js

import b from "./b"
import c from "./c"
var a = document.getElementById("a");
a.addEventListener("click",function(e){
  var clickA = new Event("clickA");
  document.dispatchEvent(clickA);
});

참고: import가 들어옵니다 변수는 사용하지 않더라도 생략하면 안 됩니다.

파일 b.js:

var b = document.getElementById("b");
document.addEventListener("clickA",function(e){
  b.innerHTML = "(128,345)";
})

파일 c.js:

var c = document.getElementById("c");
document.addEventListener("clickA",function(e){
  c.innerHTML = "你点了A";
})

이렇게 작성하면 객체에 신경 쓸 필요가 없습니다. 세 모듈 사이에 존재하며 서로의 존재를 알지 못합니다. 결합도가 매우 낮고 서로 영향을 주지 않고 완전히 독립적으로 작성할 수 있습니다. 이것은 실제로 관찰자 패턴의 구현입니다.

예제 2: 게임 프레임워크

게임을 개발하려면 게임을 시작하고, 사진과 음악을 로드하고, 로드한 후 장면과 음향 효과를 렌더링하는 작업은 여러 사람이 담당합니다. 다음과 같이 작성할 수 있습니다.

File: index.js

import loadImage from "./loadImage"
import loadMusic from "./loadMusic"
import initScene from "./initScene"  
var start = document.getElementById("start");
start.addEventListener("click",function(e){
  console.log("游戏开始！");
  document.dispatchEvent(new Event("gameStart"));
})

File: loadImage.js

// 加载图片
document.addEventListener("gameStart",function(){
  console.log("加载图片...");
  setTimeout(function(){
    console.log("加载图片完成");
    document.dispatchEvent(new Event("loadImageSuccess"));
  },1000);
});

File: loadMusic.js

//加载音乐
document.addEventListener("gameStart",function(){
  console.log("加载音乐...");
  setTimeout(function(){
    console.log("加载音乐完成");
    document.dispatchEvent(new Event("loadMusicSuccess"));
  },2000);
});

File: initScene.js

//渲染场景
document.addEventListener("loadImageSuccess",function(e){
  console.log("使用图片创建场景...");
  setTimeout(function(){
    console.log("创建场景完成");
  },2000)
});
//渲染音效
document.addEventListener("loadMusicSuccess",function(e){
  console.log("使用音乐创建音效...");
  setTimeout(function(){
    console.log("创建音效完成");
  },500)
});

로딩 모듈과 렌더링 모듈은 그렇지 않습니다. 서로 영향을 주고 확장하기 쉽습니다.

정보 전달

또한 이벤트는 맞춤 정보를 전달할 수도 있습니다:

var event = new CustomEvent('myEvent', { 'dataName': dataContent });
document.dispatchEvent(event);

(참고: 맞춤 정보를 전달하려면 Event가 아닌 CustomEvent를 사용해야 합니다.)

그런 다음 듣기 기능에서 가져옵니다.

으아악

위 내용은 자바스크립트를 사용하여 맞춤 이벤트 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!