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

js 커스텀 이벤트(1)의 목적은 단지 커스텀 이벤트가 어떻게 시뮬레이션되는지 모든 사람이 쉽게 이해할 수 있도록 하는 것입니다.
1. 이 이벤트 객체는 하나만 등록할 수 있습니다. event.여러 이벤트 제공
2. 등록 방법에서 일부 정보가 반환되지 않습니다

아래에서 이러한 문제를 해결해 보겠습니다. MyEvent.js의 소스코드는 다음과 같습니다.

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

function MyEvent() {
this.handlers={};
}
MyEvent.prototype={
addHandler:function(type,handler)
{
if(typeof this.handlers[type] == "정의되지 않음")
{
this.handlers[type]=[]
this.handlers[type].push(handler); >},
fire:function(event)
{if(this.handlers[event.type] instanceof Array)
{
var handlers=this.handlers[event.type]
for(var i= 0, len=handlers.length;i{
handlers[i](event)
}
}
},
removeHandler:function(type , handler)
{
if(this.handlers[type] instanceof Array)
{
var handlers=this.handlers[type]
for(var i= 0, len= handlers.length;i{
if(handlers[i]===handler)
{
break
}
}
handlers.splice(i,1);
}
}
}


이 유형은 첫 번째 기사의 최적화입니다.

속성 핸들러는 핸들러가 되고 배열이 됩니다.
addHandler() 메서드는 이벤트 유형과 이벤트를 처리하는 데 사용되는 함수라는 두 가지 매개 변수를 허용합니다. 이 메소드가 호출되면 핸들러 속성에 이 이벤트 유형에 대한
배열이 이미 있는지 확인하는 작업이 수행됩니다. 그렇지 않은 경우 새 배열이 생성됩니다. 그런 다음 push()를 사용하여 해당 핸들러를 배열 끝에 추가합니다.

fire() 메소드는 이벤트를 트리거하는 데 사용됩니다. 이 메소드는 최소한 type 속성을 포함하는 객체인 매개변수를 허용합니다. 그렇지 않으면 핸들러가 이미 존재하는지 확인할 수 없습니다. 이 유형을 사용하여 이벤트 유형에 해당하는 핸들러 세트를 찾고, 각 함수를 호출하고, 이벤트 객체를 제공합니다. 이는 사용자 정의 개체이므로 이벤트 개체의 다른 항목을 사용자가 정의할 수 있습니다.

removeHandler() 메소드는 addHandler()의 보조 메소드입니다. 이 메소드는 동일한 매개변수(이벤트 유형 및 이벤트 핸들러)를 허용합니다. 이 메서드는 이벤트 핸들러 배열을 검색하여 제거할 핸들러의 위치를 ​​찾습니다. 발견되면 break 연산자를 사용하여 루프를 종료합니다. 그런 다음 splice() 메서드를 사용하여 항목이 배열에서 제거됩니다.

여기서 사용 방법을 좀 더 오래 사용하는 형태로 바꿔보겠습니다. 이제 제가 아는 바에 따르면 많은 제품에는 이벤트를 사용하는 방법이 두 가지 있습니다. 하나는 직접 상속입니다(이 지역에서는 js에 이 개념이 없습니다. 프로토타입 체인을 통해 상속 효과를 시뮬레이션하면(여기에서는 자세히 설명되지 않음) 이 이벤트 객체가 이러한 동작을 갖게 되지만 이 방법은 더 제한적입니다. 이벤트. 이 개체를 보유하는 속성입니다. 예를 들어, 동일한 디렉터리에 Student.js 파일을 생성하면 내부 코드는 다음과 같습니다.

코드 복사 코드

function 학생(이름)

{
this.myEvent=new MyEvent()
this.name=name; Student.prototype={
setName:function(name)
{
var eventStart={
type:"changeNameStart",
newName:name,
oldName:this.name
};
this.myEvent.fire(eventStart);
this.name=name;
}
}


여기에는 학생 수업이 있습니다. MyEvent 객체는 생성자에서 Attribute로 초기화되고, 매개변수를 통해 name 속성을 초기화합니다.

이름 변경을 위한 setName 메소드를 제공하지만, 이름을 변경하기 전에changeNameStart 이벤트를 트리거할 수 있는 리스너가 설정됩니다.

html 페이지를 생성하고 동일한 디렉토리에 배치합니다.




코드를 복사합니다.

다음과 같습니다:

;/html>


이것은 사용하기 매우 편리하며 일반적인 사용 방법이기도 합니다.
일반적으로 실제 프로젝트에서 이벤트를 사용할 때 다음과 같은 최적화가 필요합니다.

1. 사용자는 우리가 제공하는 이벤트가 무엇인지 알 수 없습니다. 코드에서 모든 이벤트를 핸들러에 추가할 수 있습니다. . 그러나 실제로 발생하는 이벤트(fire() 메소드를 설정한 위치)는 코드에서 직관적으로 볼 수 없습니다. 일반적으로 제품을 만들 때 이러한 측면을 고려해야 합니다.

2. Daxing 프로젝트에서는 화재의 매개변수 이벤트가 고정되지 않는 것 같던데, 화재 장소에서 사용하는 것이 더 편리합니다. 여러 종류의 사건이 있을 수 있고, 불에 대한 심판도 있을 수 있습니다.
JS 이벤트를 처음 접하고 서로 소통할 수 있는 독자들에게 도움이 되기를 바랍니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.