JS 제어 events_javascript 기술 요약

개요:

이벤트는 컨트롤에 매우 중요합니다. 컨트롤의 메시지 통신 메커니즘은 가장 저렴한 비용으로 이벤트를 사용합니다. 그러나 JS 컨트롤에서는 해결해야 할 몇 가지 문제가 있습니다. DOM 모델은 해당 이벤트를 브라우저의 DOM 노드에만 적용할 수 있습니다. 따라서 이벤트 세트를 생성하는 것은 컨트롤을 작성하기 전에 수행해야 하는 작업입니다.

이벤트 메커니즘

이벤트 메커니즘에 대해 더 이상 말하고 싶지 않습니다. 다양한 언어로 된 이벤트 설명은 매우 구체적이며 모두입니다. 관찰자 패턴을 구현하면 이벤트에 필요한 인터페이스를 추출할 수 있습니다(제어 라이브러리가 jQuery를 기반으로 하기 때문에 인터페이스는 jquery와 일치합니다).

1.on: 이벤트 바인딩

2.off: 이벤트 삭제

3.fire: 이벤트 트리거

4.addTarget: 버블링 객체 추가

5.publish: 이벤트 버블링 허용

jQuery의 이벤트

jQuery의 이벤트 함수는 매우 풍부하지만 이를 지원하려면 jQuery 객체여야 합니다. 우리가 정의하는 컨트롤 클래스는 jQuery 이벤트를 직접 사용할 수 없습니다. 이벤트 컨텍스트에도 문제가 있으므로 컨트롤의 이벤트를 직접 캡슐화해야 합니다.

jQuery의 콜백은 1.7에 추가된 콜백을 위한 메커니즘입니다. 사용하기 매우 편리하지만 문제는 지정된 컨텍스트가 트리거될 때 이를 지정해야 한다는 것입니다. 수업.

바인딩 이벤트:

함수 프로토타입: function on(eventType,callback) 매개변수:
1.eventType: 이벤트 유형
2.callback: 콜백 function
3.scope: 콜백 함수의 컨텍스트입니다. 이 변수는 실제 컨트롤 바인딩 프로세스에서는 거의 사용되지 않으며 대체 방법이 있으므로 단순화를 위해 이 함수와 모든 함수에서 범위 변수를 사용합니다. 아래는 에 소개되었습니다.

위 콜백 함수의 컨텍스트는 이벤트가 바인딩된 컨트롤 자체입니다.

바인딩 삭제:
함수 프로토타입: function off(eventType,callback) ) 매개변수는 위와 동일합니다:

1.eventType: 이벤트 유형
2.callback: 콜백 함수, 이 변수가 생략되면 해당 이벤트 유형에 바인딩된 모든 함수가 삭제됩니다.
실제 컨트롤을 개발하고 사용하는 과정에서 이벤트를 삭제하는 것은 이벤트를 바인딩하는 것보다 훨씬 번거롭습니다. 이벤트를 삭제할 때 이벤트를 삭제하고 추가해야 하는 경우 해당 함수에 대한 참조가 있어야 합니다. 이벤트를 자주 발생시키려면 대리자

를 사용하여 이벤트를 트리거하는 것을 고려해 보세요.
함수 프로토타입: fire(eventType) :

1. eventType: 이벤트 유형, 바인딩됨 객체 구현에 대한 이러한 유형의 기능입니다.

여기서 주의할 점이 2가지 있습니다:

1. 이벤트를 트리거하는 방법은 여기서는 동일한 이벤트에 바인딩된 'stopOnFalse' 메소드를 사용합니다. type 다음 함수는 순차적으로 실행됩니다. 반환 값 중 하나가 false인 경우 다음 함수는 실행을 종료합니다. 이벤트를 트리거하는 다른 방법은 jquery의 콜백을 참조하세요.

2. 이벤트가 버블링에 의해 실행되는지 여부, 즉 컨트롤에 여러 하위 컨트롤이 있는 경우 하위 컨트롤이 클릭 이벤트를 트리거하면 상위 컨트롤까지 버블링될 수 있습니다. 상위 컨트롤의 Just bubble the event

Event bubbling

함수 프로토타입: function(eventType,bubble):

1만 들어야 합니다. .eventType: 이벤트 유형
2.bubble: 버블링 여부

이 함수는 addTarget(control) 함수와 함께 사용됩니다.

addTarget은 이벤트가 버블링되는 개체를 추가합니다. 컨트롤 구현에서 컨트롤의 상위 컨트롤은 기본적으로 이벤트가 버블링되는 개체로 지정됩니다.

위의 트리거 이벤트에서 언급했듯이 컨트롤 이벤트가 버블링되도록 허용하면 많은 이점이 있습니다.

1. 이벤트가 바인딩된 후 하위 컨트롤의 추가 및 삭제는 영향을 받지 않습니다.

2. 이벤트를 사용하면 더 편리하고 컨트롤 내부를 이해할 필요가 없습니다

이벤트 버블링에 해당하는 것이 위임(위임 및 위임 취소)입니다. DOM 이벤트 메커니즘과 jQuery는 모두 위임을 지원합니다. 이는 브라우저 자체가 DOM 이벤트 버블링을 지원하고 컨트롤에 구현한 이벤트 버블링 메커니즘이 위임 효과를 달성하기에 충분하기 때문입니다. 인터페이스.


이벤트 코드 구현

다음 코드에 특정 코드 구현과 일부 도움말 메소드를 작성했는데, 기사에서 확장하기에는 불편합니다. 관심이 있으신가요? 후속 컨트롤 라이브러리가 이러한 도우미 메서드와 이벤트 개체를 기반으로 하는지 살펴보고 확인할 수 있습니다. 파일의 다른 도움말 방법은 다른 장에서 설명됩니다.