jQuery를에 사용자 정의 이벤트?

해결법

1.이것 좀 봐 :

이것 좀 봐 :

(http://web.archive.org/web에 보관 된 버전을 기반으로 만료 된 블로그 페이지 http://jamiethompson.co.uk/web/2008/06/17/publish-subscribe-with-jquery/에서 다시 인쇄 /20130120010146/http://jamiethompson.co.uk/web/2008/06/17/publish-subscribe-with-jquery/)

유월 17 일, 2008

쓰기에 볼 수있는 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의 트리거와 바인딩 방법을 사용하여 술집 / 서브 시스템을 구현하는 대부분 해제 논의 된 방법을 우연히 발견했습니다.

데모 코드는해야보다 더 둔각이다. 네트워크 탐지 객체는 적극적으로 수신하고 다시 (나중에 그에 대한) 모든 가입자에게 이벤트를 '알림 서비스'발행 문서에 '상태'이벤트를 게시합니다. 이 뒤에 추론은 실제 응용 프로그램에서 아마 언제 어떻게 '알림 서비스'이벤트가 게시 제어 좀 더 논리가있을 것입니다.
```
$(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 요소는 단순히 "가입자"와 "networkDetection"로 분류된다. 우리는 다음 $에 이벤트를 통지에만 트리거에 의해 (데모 만 하나가있는)이 요소에 이벤트를 게시 할 수 있습니다 ( ". subscriber.networkDetection을")

가입자의 .subscriber.networkDetection 그룹의 일부입니다 #notifier의 사업부는 효과적으로 청취자의 역할을 바인드 익명의 기능이 있습니다.
```
$('#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");
        }
    };
});
```
그래서, 거기 당신은 간다. 이것은 아주 자세한 그리고 내 예는 모든 흥분에 없습니다. 또한 이러한 방법으로 할 수있는 재미 있지 쇼케이스 아무것도 않지만, 사람이 모든 관심에 있다면 무료 소스 느낌을 파고. 모든 코드는 데모 페이지의 머리에 인라인

2.링크는 허용 대답 쇼에 jQuery를 사용하여 술집 / 서브 시스템을 구현하는 좋은 방법을 제공하지만, 내가 읽은 다소 어려운 코드를 발견, 그래서 여기에 코드 내 단순화 된 버전입니다 :

링크는 허용 대답 쇼에 jQuery를 사용하여 술집 / 서브 시스템을 구현하는 좋은 방법을 제공하지만, 내가 읽은 다소 어려운 코드를 발견, 그래서 여기에 코드 내 단순화 된 버전입니다 :

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);
});

3.나는 ...이 (: http://docs.jquery.com/Events/bind#typedatafn에서)처럼, '바인딩'사용자 정의 이벤트에 가능 그렇게 생각 :

나는 ...이 (: 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" ]);
    });

4.나는 비슷한 질문을했지만, 실제로는 다른 대답을 찾고 있었다; 나는 사용자 지정 이벤트를 만들 찾고 있어요. 대신 항상이 말의 예를 들면 :

나는 비슷한 질문을했지만, 실제로는 다른 대답을 찾고 있었다; 나는 사용자 지정 이벤트를 만들 찾고 있어요. 대신 항상이 말의 예를 들면 :
```
$('#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();
    ...
});
```
편집 :로 업데이트가 제대로 핸들러이 문맥 권리를 통과하고, (당신이 이벤트를 취소하고자 및 버블 링 된 경우, 예를 들어) jQuery를에 핸들러에서 모든 반환 값 다시 돌아갑니다. 키 코드와 이벤트를 취소 할 수있는 기능을 포함하여 핸들러에 적절한 jQuery를 이벤트 객체를 통과하도록 업데이트되었습니다.

올드 jsfiddle : http://jsfiddle.net/b9chris/VwEb9/24/
5.그것은 이전 게시물이지만, 나는 새로운 정보로 업데이트하려고합니다.

그것은 이전 게시물이지만, 나는 새로운 정보로 업데이트하려고합니다.

일부 DOM 요소에 바인딩해야하는 사용자 정의 이벤트를 사용하고 트리거 할 수 있습니다. 당신은 사용할 필요가 그래서

과

코드는 다음과 같습니다 :
```
$(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"] );
```
좋은 설명은 여기와 여기에서 찾을 수 있습니다. 이유는 정확히이 유용 할 수 있습니다? 나는 트위터 엔지니어이 우수한 설명에서 사용하는 방법을 발견했다.

추신 일반 자바 스크립트에서 당신은 새로운 맞춤 이벤트와 함께이 작업을 수행 할 수 있지만, IE와 사파리의 문제에주의.
6.여기에 사용자 정의 이벤트를 제작하는 방법이다 :

여기에 사용자 정의 이벤트를 제작하는 방법이다 :
```
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).on('eventname.namespace', function () {});
```
마지막으로, 당신은 첫 번째 줄 것을 눈치 챘을 수도
```
$(element).off('eventname.namespace').on('eventname.namespace', ...)
```
나는 개인적으로 항상 바인딩을 해제 이벤트를 바인딩 단지 확인 동일한 이벤트 핸들러가 호출되지 없구요 것을 여러 번 할 전에 (상상이는이 지불 양식에 버튼을 제출했다 이벤트는 5 회를 구속했다)

from https://stackoverflow.com/questions/399867/custom-events-in-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 모든 사업부의 내용을 해제하는 방법 (0)	2020.10.15
[JQUERY] 어떻게 라디오 버튼의 선택을 취소합니다? (0)	2020.10.15
[JQUERY] 사용자 지정 특성에 대한 클라이언트 측 유효성 검사를 수행 (0)	2020.10.15
[JQUERY] 배열 자바 스크립트 / jQuery를 특정 문자열을 포함하는 경우 어떻게 찾아 낼 수 있을까요? [복제] (0)	2020.10.15
[JQUERY] jQuery를 사용하여 배열에서 특정 값을 제거하는 방법 (0)	2020.10.15

복붙노트

[JQUERY] jQuery를에 사용자 정의 이벤트?

jQuery를에 사용자 정의 이벤트?

해결법

1.이것 좀 봐 :

2.링크는 허용 대답 쇼에 jQuery를 사용하여 술집 / 서브 시스템을 구현하는 좋은 방법을 제공하지만, 내가 읽은 다소 어려운 코드를 발견, 그래서 여기에 코드 내 단순화 된 버전입니다 :

3.나는 ...이 (: http://docs.jquery.com/Events/bind#typedatafn에서)처럼, '바인딩'사용자 정의 이벤트에 가능 그렇게 생각 :

4.나는 비슷한 질문을했지만, 실제로는 다른 대답을 찾고 있었다; 나는 사용자 지정 이벤트를 만들 찾고 있어요. 대신 항상이 말의 예를 들면 :

5.그것은 이전 게시물이지만, 나는 새로운 정보로 업데이트하려고합니다.

6.여기에 사용자 정의 이벤트를 제작하는 방법이다 :

'JQUERY' 카테고리의 다른 글

티스토리툴바