jQuery의 사용자 지정 이벤트?
jquery에서 사용자 지정 이벤트 처리를 구현하는 최선의 방법에 대한 의견을 찾고 있습니다.저는 '클릭' 등과 같은 돔 요소에서 이벤트를 연결하는 방법을 알고 있지만, 일부 미리 보기 기능을 처리하기 위해 작은 자바스크립트 라이브러리/플러그인을 구축하고 있습니다.
일련의 규칙 및 데이터/사용자 입력에서 돔 요소의 일부 텍스트를 업데이트하는 스크립트가 실행되고 있지만, 이제 이 스크립트가 알 수 없는 다른 요소에 동일한 텍스트가 표시되어야 합니다.제가 필요한 것은 필요한 텍스트를 생성하는 이 스크립트를 어떻게든 관찰할 수 있는 좋은 패턴입니다.
어떻게 하면 좋을까요?사용자 이벤트를 발생/처리하기 위해 jquery에 내장된 일부 기능을 간과했습니까? 아니면 이를 위해 jquery 플러그인이 필요합니까?이 문제를 해결하는 가장 좋은 방법은 무엇이라고 생각하십니까?
승인된 답변에 제공된 링크는 jQuery를 사용하여 pub/sub 시스템을 구현하는 좋은 방법을 보여주지만, 코드를 읽기가 다소 어렵다는 것을 알게 되었기 때문에 코드의 단순화된 버전은 다음과 같습니다.
$(document).on('testEvent', function(e, eventInfo) {
subscribers = $('.subscribers-testEvent');
subscribers.trigger('testEventHandler', [eventInfo]);
});
$('#myButton').on('click', function() {
$(document).trigger('testEvent', [1011]);
});
$('#notifier1').on('testEventHandler', function(e, eventInfo) {
alert('(notifier1)The value of eventInfo is: ' + eventInfo);
});
$('#notifier2').on('testEventHandler', function(e, eventInfo) {
alert('(notifier2)The value of eventInfo is: ' + eventInfo);
});
이것을 확인해 보십시오.
(http://web.archive.org/web/20130120010146/http ://http://jamiethompson.co.uk/web/2008/06/17/publish-subscribe-with-jquery/ 의 보관된 버전을 기준으로 만료된 블로그 페이지 jamiethompson.co.uk/web/2008/06/17/publish-subscribe-with-jquery/) 에서 삭제됩니다.
jQuery를 사용하여 게시/구독
2008년 6월 17일
Google Gears의 오프라인 기능과 통합된 jQuery UI를 작성하기 위해 jQuery를 사용하여 네트워크 연결 상태를 폴링하기 위해 몇 가지 코드를 사용하고 있습니다.
네트워크 탐지 개체
기본 전제는 매우 간단합니다.정기적으로 URL을 폴링하는 네트워크 탐지 개체의 인스턴스를 만듭니다.이러한 HTTP 요청이 실패할 경우 네트워크 연결이 끊겼거나 서버에 현재 연결할 수 없다고 가정할 수 있습니다.
$.networkDetection = function(url,interval){
var url = url;
var interval = interval;
online = false;
this.StartPolling = function(){
this.StopPolling();
this.timer = setInterval(poll, interval);
};
this.StopPolling = function(){
clearInterval(this.timer);
};
this.setPollInterval= function(i) {
interval = i;
};
this.getOnlineStatus = function(){
return online;
};
function poll() {
$.ajax({
type: "POST",
url: url,
dataType: "text",
error: function(){
online = false;
$(document).trigger('status.networkDetection',[false]);
},
success: function(){
online = true;
$(document).trigger('status.networkDetection',[true]);
}
});
};
};
여기에서 데모를 볼 수 있습니다.오프라인으로 작동하도록 브라우저를 설정하고 어떻게 되는지 확인합니다.아니요, 별로 신나지 않아요.
트리거 및 바인딩
하지만 흥미로운 것은 애플리케이션을 통해 상태가 전달되는 방법입니다.저는 jQuery의 트리거 및 바인딩 방법을 사용하여 pub/sub 시스템을 구현하는 거의 논의되지 않은 방법을 우연히 발견했습니다.
데모 코드는 필요 이상으로 둔감합니다.네트워크 탐지 개체는 문서에 '상태' 이벤트를 게시하고, 문서는 이 이벤트를 적극적으로 수신하며, 모든 구독자(나중에 있는 구독자)에게 '알림' 이벤트를 게시합니다.이러한 이유는 실제 애플리케이션에서 '알림' 이벤트가 게시되는 시기와 방법을 제어하는 논리가 더 있을 수 있기 때문입니다.
$(document).bind("status.networkDetection", function(e, status){
// subscribers can be namespaced with multiple classes
subscribers = $('.subscriber.networkDetection');
// publish notify.networkDetection even to subscribers
subscribers.trigger("notify.networkDetection", [status])
/*
other logic based on network connectivity could go here
use google gears offline storage etc
maybe trigger some other events
*/
});
jQuery의 DOM 중심 접근 이벤트로 인해 DOM 요소에 게시(트리거됨)됩니다.일반 이벤트에 대한 창 또는 문서 개체이거나 선택기를 사용하여 jQuery 개체를 생성할 수 있습니다.데모에서 제가 취한 접근 방식은 가입자를 정의하는 거의 네임스페이스 접근 방식을 만드는 것입니다.
가입자가 될 DOM 요소는 단순히 "가입자" 및 "네트워크 탐지"로 분류됩니다.그런 다음 알림 이벤트를 트리거하여 이러한 요소(데모에 하나만 있음)에만 이벤트를 게시할 수 있습니다.
의 일부인 디브..subscriber.networkDetection
그러면 가입자 그룹이 익명 기능에 바인딩되어 효과적으로 수신자 역할을 합니다.
$('#notifier').bind("notify.networkDetection",function(e, online){
// the following simply demonstrates
notifier = $(this);
if(online){
if (!notifier.hasClass("online")){
$(this)
.addClass("online")
.removeClass("offline")
.text("ONLINE");
}
}else{
if (!notifier.hasClass("offline")){
$(this)
.addClass("offline")
.removeClass("online")
.text("OFFLINE");
}
};
});
자, 여기 있습니다.그것은 모두 꽤 장황하고 제 예는 전혀 흥미롭지 않습니다.또한 이러한 방법으로 수행할 수 있는 흥미로운 작업을 보여주지는 않지만, 소스를 파헤치는 데 관심이 있는 사람은 언제든지 자유롭게 사용할 수 있습니다.데모 페이지의 머리 부분에 모든 코드가 인라인으로 표시됩니다.
그런 것 같아요.(http://docs.jquery.com/Events/bind#typedatafn) 에서)와 같은 사용자 지정 이벤트를 '슬립'할 수 있습니다.
$("p").bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});
비슷한 질문이 있었지만 실제로는 다른 답을 찾고 있었습니다. 사용자 지정 이벤트를 만드는 중입니다.예를 들어, 항상 이렇게 말하는 대신:
$('#myInput').keydown(function(ev) {
if (ev.which == 13) {
ev.preventDefault();
// Do some stuff that handles the enter key
}
});
줄여서 다음과 같이 쓰고 싶습니다.
$('#myInput').enterKey(function() {
// Do some stuff that handles the enter key
});
트리거 및 바인딩은 모든 이야기를 말해주지 않습니다. 이것은 JQuery 플러그인입니다.http://docs.jquery.com/Plugins/Authoring
"enterKey" 함수는 jQuery.fn에 속성으로 첨부됩니다. 이것은 필요한 코드입니다.
(function($){
$('body').on('keydown', 'input', function(ev) {
if (ev.which == 13) {
var enterEv = $.extend({}, ev, { type: 'enterKey' });
return $(ev.target).trigger(enterEv);
}
});
$.fn.enterKey = function(selector, data, fn) {
return this.on('enterKey', selector, data, fn);
};
})(jQuery);
http://jsfiddle.net/b9chris/CkvuJ/4/
위의 장점은 다음과 같은 링크 수신기에서 키보드 입력을 우아하게 처리할 수 있다는 것입니다.
$('a.button').on('click enterKey', function(ev) {
ev.preventDefault();
...
});
:를 하기 업데이트 .this
처리기에 대한 컨텍스트 및 처리기에서 jQuery로 반환 값을 반환합니다(예: 이벤트 및 버블링을 취소하려는 경우).키 코드 및 이벤트 취소 기능을 포함하여 적절한 jQuery 이벤트 개체를 처리기에 전달하도록 업데이트되었습니다.
이전 jsfiddle: http://jsfiddle.net/b9chris/VwEb9/24/
오래된 게시물이지만, 새로운 정보로 업데이트해보겠습니다.
사용자 지정 이벤트를 사용하려면 DOM 요소에 바인딩하고 트리거해야 합니다.그래서 당신은 사용해야 합니다.
.on() 메서드는 이벤트 유형과 이벤트 처리 함수를 인수로 사용합니다.선택적으로 이벤트 관련 데이터를 두 번째 인수로 수신하여 이벤트 처리 함수를 세 번째 인수로 푸시할 수도 있습니다.전달된 모든 데이터는 이벤트 개체의 데이터 속성에 있는 이벤트 처리 기능에서 사용할 수 있습니다.이벤트 처리 함수는 항상 이벤트 개체를 첫 번째 인수로 수신합니다.
그리고.
.trigger() 메서드는 이벤트 유형을 인수로 사용합니다.선택적으로 값 배열을 사용할 수도 있습니다.이러한 값은 이벤트 개체 뒤에 인수로 이벤트 처리 함수에 전달됩니다.
코드는 다음과 같습니다.
$(document).on("getMsg", {
msg: "Hello to everyone",
time: new Date()
}, function(e, param) {
console.log( e.data.msg );
console.log( e.data.time );
console.log( param );
});
$( document ).trigger("getMsg", [ "Hello guys"] );
여기와 여기에서 좋은 설명을 찾을 수 있습니다.정확히 왜 이것이 유용할 수 있습니까?저는 트위터 엔지니어의 훌륭한 설명에서 그것을 사용하는 방법을 찾았습니다.
추신: 일반 자바스크립트에서는 새로운 CustomEvent로 이를 수행할 수 있지만 IE 및 Safari 문제에 주의해야 합니다.
사용자 지정 이벤트를 작성하는 방법은 다음과 같습니다.
var event = jQuery.Event('customEventName');
$(element).trigger(event);
물론, 당신은 간단히 할 수 있습니다.
$(element).trigger('eventname');
하지만 내가 쓴 방법은 사용자가 기본값을 방지했는지 여부를 감지할 수 있게 해줍니다.
var prevented = event.isDefaultPrevented();
이렇게 하면 양식의 단추 요소를 클릭하지만 오류가 있을 경우 양식을 게시하지 않으려는 경우와 같이 특정 이벤트 처리를 중지하라는 최종 사용자의 요청을 들을 수 있습니다.
그리고 나서 나는 보통 그런 일들을 듣습니다.
$(element).off('eventname.namespace').on('eventname.namespace', function () {
...
});
다시 한 번 말하지만, 당신은 그냥 할 수 있습니다.
$(element).on('eventname', function () {
...
});
하지만 저는 항상 이것이 다소 안전하지 않다는 것을 발견했습니다. 특히 당신이 팀에서 일하고 있다면요.
다음은 문제가 없습니다.
$(element).on('eventname', function () {});
그러나 어떤 이유로든 이 이벤트의 바인딩을 해제해야 한다고 가정합니다(사용 불가능한 단추를 상상).그러면 해야 할 것 같습니다
$(element).off('eventname', function () {});
모두 제거됩니다.eventname
에서 발생한 사건.$(element)
나중에 다른 사용자가 해당 요소에 이벤트를 바인딩할지 여부를 알 수 없으며, 실수로 해당 이벤트도 바인딩 해제됩니다.
이 문제를 방지하는 안전한 방법은 이벤트 이름을 지정하는 것입니다.
$(element).on('eventname.namespace', function () {});
마지막으로, 여러분은 아마 첫 번째 줄이
$(element).off('eventname.namespace').on('eventname.namespace', ...)
개인적으로 동일한 이벤트 핸들러가 여러 번 호출되지 않도록 하기 위해 이벤트 바인딩 전에 항상 바인딩을 해제합니다(이 버튼이 결제 양식의 제출 버튼이었고 이벤트가 5번 바인딩되었다고 상상해 보십시오).
언급URL : https://stackoverflow.com/questions/399867/custom-events-in-jquery
'programing' 카테고리의 다른 글
Powershell에서 인증된 웹 요청을 만드는 방법은 무엇입니까? (0) | 2023.08.08 |
---|---|
CSS를 사용하여 여러 개의 배경 이미지를 가질 수 있습니까? (0) | 2023.08.08 |
매개 변수를 허용하는 expressjs 미들웨어 생성 (0) | 2023.08.08 |
정규식 빈 문자열 또는 전자 메일 (0) | 2023.08.08 |
호출 워크북을 닫지 않고 VBA SaveAs를 사용하는 방법은 무엇입니까? (0) | 2023.08.08 |