jQuery의 사용자 지정 이벤트?

jQuery의 사용자 지정 이벤트?

jquery에서 사용자 지정 이벤트 처리를 구현하는 최선의 방법에 대한 의견을 찾고 있습니다.저는 '클릭' 등과 같은 돔 요소에서 이벤트를 연결하는 방법을 알고 있지만, 일부 미리 보기 기능을 처리하기 위해 작은 자바스크립트 라이브러리/플러그인을 구축하고 있습니다.

일련의 규칙 및 데이터/사용자 입력에서 돔 요소의 일부 텍스트를 업데이트하는 스크립트가 실행되고 있지만, 이제 이 스크립트가 알 수 없는 다른 요소에 동일한 텍스트가 표시되어야 합니다.제가 필요한 것은 필요한 텍스트를 생성하는 이 스크립트를 어떻게든 관찰할 수 있는 좋은 패턴입니다.

어떻게 하면 좋을까요?사용자 이벤트를 발생/처리하기 위해 jquery에 내장된 일부 기능을 간과했습니까? 아니면 이를 위해 jquery 플러그인이 필요합니까?이 문제를 해결하는 가장 좋은 방법은 무엇이라고 생각하십니까?

승인된 답변에 제공된 링크는 jQuery를 사용하여 pub/sub 시스템을 구현하는 좋은 방법을 보여주지만, 코드를 읽기가 다소 어렵다는 것을 알게 되었기 때문에 코드의 단순화된 버전은 다음과 같습니다.

http://jsfiddle.net/tFw89/5/

$(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