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

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와 같은 디렉터리에 넣어두면 됩니다. 코드는 다음과 같습니다.

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

<헤드>
<제목>

저자별 최신 기사