jQuery trigger () 메소드 : jQuery에서 사용자 정의 이벤트를 만드는 방법-JS 튜토리얼-php.cn

JQuery trigger() Method : How to Create Custom Events in jQuery

jQuery trigger () 메소드 : jQuery에서 사용자 정의 이벤트를 만드는 방법 이전 기사에서 JavaScript에서 사용자 정의 이벤트를 만드는 방법 , 우리는 사용자 정의 이벤트와 기본 customevent 객체의 이점에 대해 논의했습니다. 요약하기 위해, 우리는 우리 자신의 명명 된 이벤트를 해고 할 수 있습니다. Demonstation 페이지는 유효한 메시지가 제출 될 때마다 "NewMessage"이벤트를 해고 한 양식을 제공했습니다. 많은 핸들러 가이 이벤트를 구독하여 자신의 행동을 수행 할 수 있습니다. 우리의 유일한 문제 : Customevent는 현재 Safari 또는 Internet Explorer에서 지원되지 않습니다. 브라우저 호환성 문제 주변에는 방법이 있습니다. 한 가지 해결책은 사용자 정의 이벤트 기능을 구현하는 이벤트 캡슐화 기능을 작성하는 것입니다. 다행히도 필요하지 않습니다. 맞춤형 이벤트는 jQuery를 포함한 여러 자바 스크립트 라이브러리에서 지원됩니다. jQuery의 .Trigger 메소드가 핵심입니다. 예를 들어 언제든지 새 유형 이름과 임의의 데이터가있는 이벤트를 트리거 할 수 있습니다.

$.event.trigger({
	type: "newMessage",
	message: "Hello World!",
	time: new Date()
});

로그인 후 복사

핸들러는 이제 "NewMessage"이벤트를 구독 할 수 있습니다 (예 :

$(document).on("newMessage", newMessageHandler);

로그인 후 복사

데모 페이지 이 예제는 jQuery 코드를 보여줍니다. jQuery 사용자 정의 이벤트 데모 페이지를보십시오 표준 이벤트 핸들러는 HTML 양식의 제출물을 찾습니다. 이 기능은 현재 메시지를 가져오고 유효하다고 가정하면 새로운 "NewMessage"이벤트를 발송합니다.

핸들러는 이제 "NewMessage"이벤트를 구독 할 수 있습니다. 이벤트는 유효한 메시지가있는 경우에만 제기됩니다.

메시지 자체는 이벤트 객체의 메시지 속성에서 추출 할 수 있습니다. 브라우저 호환성 JQuery 1.X 메소드는 Internet Explorer 6.0 이상을 포함한 모든 브라우저에서 실행됩니다. 분명히 코드가 원본 Customevents보다 느린 코드가 실행 되더라도 큰 보너스입니다. 그러나 2013 년에 출시 될 예정인 JQuery 2.0은 IE6, 7 및 8을 지원하지 않을 것입니다. jQuery는 인기가 있지만 프로토 타입, Mootools 및 Yui를 포함한 대부분의 JavaScript 라이브러리에서 맞춤형 이벤트가 지원됩니다. . 이 게시물을 읽는 것을 즐겼다면 학습 가능한 것을 좋아할 것입니다. 주인으로부터 신선한 기술과 기술을 배울 수있는 곳. 회원들은 jQuery : Ninja : New Kicks and Tricks. 이 기사에 대한 의견이 닫힙니다. jQuery에 대한 질문이 있습니까? 우리 포럼에서 물어 보지 않겠습니까?

$("#msgbox").on("submit", SendMessage);

// new message: raise newMessage event
function SendMessage(e) {

	e.preventDefault();
	var msg = $("#msg").val().trim();
	if (msg) {
		$.event.trigger({
			type: "newMessage",
			message: msg,
			time: new Date()
		});
	}

}

로그인 후 복사

jQuery 사용자 정의 이벤트에 대한 자주 묻는 질문 (FAQ) jQuery 사용자 정의 이벤트는 무엇이며 왜 중요한가?

// newMessage event subscribers
$(document).on("newMessage", newMessageHandler);

// newMessage event handler
function newMessageHandler(e) {
	LogEvent(
		"Event subscriber on "+e.currentTarget.nodeName+", "
		+e.time.toLocaleString()+": "+e.message
	);
}

로그인 후 복사

jQuery 사용자 정의 이벤트는 개발자가 JQuery가 제공하는 표준 이벤트 외에도 자신의 이벤트를 만들고 관리 할 수있는 사용자 정의 이벤트입니다. 응용 프로그램의 다른 부분에서 재사용 할 수있는 동작을 캡슐화하는 방법을 제공하기 때문에 중요합니다. 이로 인해 복제를 줄이고 우려의 분리를 촉진하여 클리너, 더 관리 가능한 코드로 이어질 수 있습니다. jQuery에서 사용자 정의 이벤트를 만드는 방법은 무엇입니까?

jQuery에서 사용자 정의 이벤트를 만드는 것은 간단합니다. .trigger () 메소드를 사용하여 사용자 정의 이벤트를 트리거 할 수 있습니다. 간단한 예는 다음과 같습니다.

$ (document) .trigger ( 'mycustomevent');
이 예에서 'MyCustomevent'는 사용자 정의 이벤트의 이름입니다.

jQuery의 사용자 정의 이벤트 핸들러로 데이터를 전달하려면 어떻게해야합니까?
.trigger ()에 추가 인수를 제공하여 jQuery의 사용자 정의 이벤트 핸들러에 데이터를 전달할 수 있습니다. 방법. 이 인수는 JavaScript 객체 일 수 있습니다. 예는 다음과 같습니다.

$ (document) .trigger ( 'mycustomevent', {key : 'value'});

이 예에서는 객체 {key : 'value'}입니다. 이벤트 핸들러에 전달되었습니다.

jQuery에서 사용자 정의 이벤트를 어떻게 처리합니까?
.on ()을 사용하여 jQuery에서 사용자 정의 이벤트를 처리 할 수 있습니다. 방법. 예는 다음과 같습니다.
$ (document) .on ( 'mycustomevent', function (event, data) { console.log (data.key); // 'value'
사용자 정의 이벤트가 전파되는 것을 중지 할 수 있습니까? jQuery?
예, 이벤트 객체에서 .stopPropagation () 메소드를 호출하여 사용자 정의 이벤트가 jQuery에서 전파되는 것을 중지 할 수 있습니다. 예는 다음과 같습니다.

$ (document) .on ( 'mycustomevent', function (event) {}; , stopPropagation () 메소드는 이벤트가 DOM 트리를 기포하지 못하게합니다.

jQuery에서 사용자 정의 이벤트의 기본 동작을 방지 할 수 있습니까? 예, 이벤트 객체에서 .preventDefault () 메소드를 호출하여 jQuery에서 사용자 정의 이벤트의 기본 동작을 방지 할 수 있습니다. 예는 다음과 같습니다.

$ (document) .on ( 'mycustomevent', function (event) {
>이 예에서는 다음과 같습니다 , expendDefault () 메소드는 이벤트와 관련된 기본 동작을 방지합니다.
jQuery에서 한 번만 사용자 정의 이벤트를 트리거 할 수 있습니까? . 예, .on () 메소드 대신 .one () 메소드를 사용하여 jQuery에서 사용자 정의 이벤트를 한 번만 트리거 할 수 있습니다. 예는 다음과 같습니다.
$ (Document) .One ( 'myCustomevent', function () {
이 예에서는 'mycustomevent'가 여러 번 트리거 되더라도 이벤트 핸들러는 한 번만 호출됩니다.
사용자 정의 이벤트 핸들러를 제거 할 수 있습니까? jQuery?
예, .off () 메소드를 사용하여 jQuery에서 사용자 정의 이벤트 핸들러를 제거 할 수 있습니다. 예는 다음과 같습니다. $ (document) .off ( 'mycustomevent');

이 예에서는 문서의 'mycustomevent'에 대한 모든 핸들러가 제거됩니다.

jQuery에서 사용자 정의 이벤트를 수동으로 트리거 할 수 있습니까?
예, .trigger () 메소드를 사용하여 jQuery에서 사용자 정의 이벤트를 수동으로 트리거 할 수 있습니다. 예는 다음과 같습니다.
$ (document) .trigger ( 'mycustomevent');
이 예에서는 'mycustomevent'가 수동으로 트리거됩니다 jQuery의 사용자 정의 이벤트에 여러 핸들러를 바인딩 할 수 있습니까? 예, 동일한 이벤트 이름으로 .on () 메서드를 여러 번 호출하여 여러 핸들러를 jQuery의 사용자 정의 이벤트에 바인딩 할 수 있습니다. 예는 다음과 같습니다.