js 사용자 정의 이벤트 및 이벤트 상호 작용 원칙 개요 (1)_javascript 기술

JS에서 이벤트는 JS가 브라우저와 상호 작용하는 주요 방법입니다. 이벤트는 느슨하게 결합된 코드를 생성하는 기술인 Observer라는 디자인 패턴입니다. 객체는 객체의 수명 주기에서 흥미로운 순간이 도래했음을 나타내는 이벤트를 게시할 수 있습니다. 그런 다음 다른 개체는 개체를 관찰하고 흥미로운 순간이 올 때까지 기다렸다가 코드를 실행하여 응답할 수 있습니다.

관찰자 패턴은 주체와 관찰자라는 두 가지 유형의 객체로 구성됩니다. 주체는 이벤트 게시를 담당하고, 관찰자는 이러한 이벤트를 구독하여 주체를 관찰합니다. 이 패턴의 핵심 개념은 에이전트가 관찰자에 대해 아무것도 모른다는 것입니다. 즉, 관찰자가 없어도 자체적으로 존재할 수 있고 정상적으로 작동할 수 있다는 의미입니다. 반면 관찰자는 주제에 대해 알고 있으며 이벤트에 대한 콜백 함수(이벤트 핸들러)를 등록할 수 있습니다. DOM의 경우 DOM 요소가 주제이고 이벤트 처리 코드가 관찰자입니다.

이벤트는 DOM과 상호작용하는 가장 일반적인 방법이지만 맞춤 이벤트를 구현하여 DOM이 아닌 코드에서도 사용할 수 있습니다. 사용자 정의 이벤트의 기본 개념은 이벤트를 관리하는 객체를 생성하고 다른 객체가 해당 이벤트를 수신할 수 있도록 하는 것입니다. 간단히 말해서, 프로그램이 실행될 때 여러 경로가 있을 수 있기를 바라며, 프로그램이 특정 장소로 ​​실행되면 즉시 사용자 등록 메소드에 있는 코드를 실행한 후 실행이 끝난 후 계속 실행되기를 바랍니다. 이 프로세스를 모니터링이라고 합니다.

예를 들어 MyEvent.js 파일을 만들고 그 안에 클래스를 만듭니다.

코드 복사 코드는 다음과 같습니다:

function MyEvent(){
this.handler;
}
MyEvent.prototype={
addHandler:function(handler)
{
this .handler=handler;
},
fire:function()
{
this.handler()
},
removeHandler:function()
{
this.handler=null;
}
}

위는 ​​​​js 프로토타입 아이디어를 활용하여 만든 클래스입니다. 잘 모르시는 분들은 관련 정보를 확인하시면 됩니다. MyEvent 유형에는 이벤트 핸들러(즉, 사용자가 등록한 메소드)를 저장하는 데 사용되는 별도의 속성 핸들러가 있습니다. 또한 세 가지 메서드가 있습니다. 이벤트 핸들러를 등록하는 데 사용되는 addHandler(), 이벤트를 트리거하는 데 사용되는 fire() 및 이벤트 핸들러 등록을 취소하는 데 사용되는 RemoveHandler().

그러면 이렇게 활용하고, 새로운 html 파일을 만들어 쉽게 참고할 수 있도록 MyEvent.js와 같은 디렉터리에 넣어두면 됩니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.