복붙노트

[JQUERY] jQuery를 함께 바인딩 이벤트를 주문하는 방법

JQUERY

jQuery를 함께 바인딩 이벤트를 주문하는 방법

해결법


  1. 1.나는 이러한 과정을 일반화하는 연령대에 노력했지만, 내 경우에는 I은 체인의 첫 번째 이벤트 리스너의 순서와 관련되었다.

    나는 이러한 과정을 일반화하는 연령대에 노력했지만, 내 경우에는 I은 체인의 첫 번째 이벤트 리스너의 순서와 관련되었다.

    그것은 어떤 소용이 있다면, 여기에 바인드 항상 다른 사람 전에 트리거 이벤트 리스너 나의 jQuery 플러그인은 다음과 같습니다

    ** jQuery를 함께 업데이트 인라인 변경 (감사 Toskan) **

    (function($) {
        $.fn.bindFirst = function(/*String*/ eventType, /*[Object])*/ eventData, /*Function*/ handler) {
            var indexOfDot = eventType.indexOf(".");
            var eventNameSpace = indexOfDot > 0 ? eventType.substring(indexOfDot) : "";
    
            eventType = indexOfDot > 0 ? eventType.substring(0, indexOfDot) : eventType;
            handler = handler == undefined ? eventData : handler;
            eventData = typeof eventData == "function" ? {} : eventData;
    
            return this.each(function() {
                var $this = $(this);
                var currentAttrListener = this["on" + eventType];
    
                if (currentAttrListener) {
                    $this.bind(eventType, function(e) {
                        return currentAttrListener(e.originalEvent); 
                    });
    
                    this["on" + eventType] = null;
                }
    
                $this.bind(eventType + eventNameSpace, eventData, handler);
    
                var allEvents = $this.data("events") || $._data($this[0], "events");
                var typeEvents = allEvents[eventType];
                var newEvent = typeEvents.pop();
                typeEvents.unshift(newEvent);
            });
        };
    })(jQuery);
    

    참고 사항 :


  2. 2.순서가 중요하다면 해당 이벤트를 다른 콜백에 의해 트리거 될 때 당신은 화재에 자신의 이벤트와 바인드 콜백을 만들 수 있습니다.

    순서가 중요하다면 해당 이벤트를 다른 콜백에 의해 트리거 될 때 당신은 화재에 자신의 이벤트와 바인드 콜백을 만들 수 있습니다.

    $('#mydiv').click(function(e) {
        // maniplate #mydiv ...
        $('#mydiv').trigger('mydiv-manipulated');
    });
    
    $('#mydiv').bind('mydiv-manipulated', function(e) {
        // do more stuff now that #mydiv has been manipulated
        return;
    });
    

    적어도 뭐 그런.


  3. 3.당신의 모든 콜백이 항상 존재하려고하는 당신이 그들을 서로에 의존에 만족하는 경우 Dowski의 방법이 좋다.

    당신의 모든 콜백이 항상 존재하려고하는 당신이 그들을 서로에 의존에 만족하는 경우 Dowski의 방법이 좋다.

    당신은, 당신이 버블 링을 활용 및 부모 요소에 대표로 후속 이벤트를 첨부 할 수 있지만 콜백은, 서로 독립적으로합니다. 부모 요소의 핸들러는 바로 문서에 계속 요소의 처리기 한 후 트리거됩니다. 당신이 핸들러를 건너 뛸 등 event.stopPropagation ()에서는 event.preventDefault ()를 사용하고 취소 조치를 해제 취소 할 수 있습니다 이것은 매우 좋다.

    $( '#mybutton' ).click( function(e) { 
        // Do stuff first
    } );
    
    $( '#mybutton' ).click( function(e) { 
        // Do other stuff first
    } );
    
    $( document ).delegate( '#mybutton', 'click', function(e) {
        // Do stuff last
    } );
    

    https://github.com/nickyleach/jQuery.bindLast :이 마음에 들지 않으면 또는, 당신은 닉에 여과 bindLast 이벤트를 강제로 플러그인 마지막을 준수하는 데 사용할 수 있습니다.

    당신이 jQuery를 1.5을 사용하는 경우 또는, 당신은 또한 잠재적으로 새로운 이연 객체 영리한 뭔가를 할 수 있습니다.


  4. 4.바운드 콜백에서 호출하는 순서는 각 jQuery를 객체의 이벤트 데이터에 의해 관리됩니다. 직접 데이터를보고 조작 할 수있는 기능 (내가 아는)가되지 않습니다 만) 바인딩 ()와 결합 해체를 (사용 (또는 해당 도우미의 모든 기능) 할 수 있습니다.

    바운드 콜백에서 호출하는 순서는 각 jQuery를 객체의 이벤트 데이터에 의해 관리됩니다. 직접 데이터를보고 조작 할 수있는 기능 (내가 아는)가되지 않습니다 만) 바인딩 ()와 결합 해체를 (사용 (또는 해당 도우미의 모든 기능) 할 수 있습니다.

    Dowski의 방법은 최고입니다, 당신은 "진짜"이벤트에 바인딩 "첫 번째"콜백, 사용자 정의 이벤트의 순서 순서에 결합하는 다양한 바인딩 콜백을 수정해야합니다. 그런 식으로, 상관없이 바인딩 할 차례를, 순서는 올바른 방법으로 실행되지 않습니다.

    내가 볼 수있는 유일한 대안은 당신이 정말, 정말 찬찬히 원하지 않는 무언가이다 : 당신이 알고있는 경우 함수의 바인딩 구문에, 전에 시도를 결합되었을 수 바인딩 해제 후, 그 모든 기능과 다시 결합 그들 적절한 순서에 자신있다. 이제 중복 된 코드를 가지고 있기 때문에 그건 그냥, 문제에 대해 묻는 데요.

    jQuery를 사용하면 간단하지만, 가능하지 않는 것 jQuery를 핵심으로 후크 몇 가지 코드를 작성하지 않고 객체의 이벤트 데이터에 바인딩 된 이벤트의 순서를 변경할 수 있다면 그것은 멋진 것입니다. 그리고 내가 생각하지 않은이 것을 허용하는 의미는 그래서 어쩌면 의도적 인 누락입니다, 아마이 있습니다.


  5. 5.JQuery와 우주에서이 버전 1.8로 다르게 구현해야한다는주십시오 참고. 다음 릴리스 노트는 jQuery를 블로그에서이다 :

    JQuery와 우주에서이 버전 1.8로 다르게 구현해야한다는주십시오 참고. 다음 릴리스 노트는 jQuery를 블로그에서이다 :

    우리는 핸들러가 jQuery를 우주에서 실행되는 순서의 완벽하게 제어 할 수 없습니다. Ricoo 이상이 밖으로 포인트. 그의 대답처럼 보이지 않는 것은 그에게 많은 사랑을 얻었지만,이 기술은 매우 편리합니다. 예를 들어, 언제든지 당신이 라이브러리 위젯의 일부 처리기하기 전에 자신의 핸들러를 실행해야하거나 조건부 위젯의 핸들러에 대한 호출을 취소 할 수있는 능력이 필요합니다, 고려 :

    $("button").click(function(e){
        if(bSomeConditional)
           e.stopImmediatePropagation();//Don't execute the widget's handler
    }).each(function () {
        var aClickListeners = $._data(this, "events").click;
        aClickListeners.reverse();
    });
    

  6. 6.

    function bindFirst(owner, event, handler) {
        owner.unbind(event, handler);
        owner.bind(event, handler);
    
        var events = owner.data('events')[event];
        events.unshift(events.pop());
    
        owner.data('events')[event] = events;
    }
    

  7. 7.단지 바인드 핸들러는 일반적으로 다음 실행 :

    단지 바인드 핸들러는 일반적으로 다음 실행 :

    element.data('events').action.reverse();
    

    그래서 예를 들면 :

    $('#mydiv').data('events').click.reverse();
    

  8. 8.당신이 뭔가를 시도 할 수 있습니다 :

    당신이 뭔가를 시도 할 수 있습니다 :

    /**
      * Guarantee that a event handler allways be the last to execute
      * @param owner The jquery object with any others events handlers $(selector)
      * @param event The event descriptor like 'click'
      * @param handler The event handler to be executed allways at the end.
    **/
    function bindAtTheEnd(owner,event,handler){
        var aux=function(){owner.unbind(event,handler);owner.bind(event,handler);};
        bindAtTheStart(owner,event,aux,true);
    
    }
    /**
      * Bind a event handler at the start of all others events handlers.
      * @param owner Jquery object with any others events handlers $(selector);
      * @param event The event descriptor for example 'click';
      * @param handler The event handler to bind at the start.
      * @param one If the function only be executed once.
    **/
    function bindAtTheStart(owner,event,handler,one){
        var eventos,index;
        var handlers=new Array();
        owner.unbind(event,handler);
        eventos=owner.data("events")[event];
        for(index=0;index<eventos.length;index+=1){
            handlers[index]=eventos[index];
        }
        owner.unbind(event);
        if(one){
            owner.one(event,handler);
        }
        else{
            owner.bind(event,handler);
        }
        for(index=0;index<handlers.length;index+=1){
            owner.bind(event,ownerhandlers[index]);
        }   
    }
    

  9. 9.나는 같은 문제를 가지고이 주제를 발견했다. 위의 대답은 그 문제를 해결할 수 있지만, 나는 그들이 좋은 계획을 생각하지 않는다.

    나는 같은 문제를 가지고이 주제를 발견했다. 위의 대답은 그 문제를 해결할 수 있지만, 나는 그들이 좋은 계획을 생각하지 않는다.

    우리가 현실 세계에 대해 생각해 보자.

    우리가 그 해답을 사용하는 경우, 우리는 우리의 코드를 변경해야합니다. 당신은 당신의 코드 스타일을 변경해야합니다. 이 같은:

    실물:

    $('form').submit(handle);
    

    마구 자르기:

    bindAtTheStart($('form'),'submit',handle);
    

    시간이 지남에 따라, 프로젝트에 대해 생각합니다. 코드는 추한 읽기 어렵다! anthoer 이유는 간단 항상 더 나은 경우도 있습니다. 당신이 10 bindAtTheStart이있는 경우, 그것은 버그가 전혀 없이도 할 수 있습니다. 100 bindAtTheStart이있는 경우, 정말 당신이 올바른 순서를 유지할 수 있니?

    그래서 당신은 최선의 방법을 생각 multiple.I 같은 이벤트를 바인딩해야하는 경우 제어 JS 파일 또는 JS 코드로드 순서입니다. JQuery와는 큐로 이벤트 데이터를 처리 할 수 ​​있습니다. 순서는 먼저 아웃 처음이다. 당신은 어떤 코드를 변경할 필요가 없습니다. 단지 변화로드 순서.


  10. 10.여기에 jQuery를의 다른 버전을 포함하는이에서 내 샷이다 :

    여기에 jQuery를의 다른 버전을 포함하는이에서 내 샷이다 :

    // Binds a jQuery event to elements at the start of the event chain for that type.
    jQuery.extend({
        _bindEventHandlerAtStart: function ($elements, eventType, handler) {
            var _data;
    
            $elements.bind(eventType, handler);
            // This bound the event, naturally, at the end of the event chain. We
            // need it at the start.
    
            if (typeof jQuery._data === 'function') {
                // Since jQuery 1.8.1, it seems, that the events object isn't
                // available through the public API `.data` method.
                // Using `$._data, where it exists, seems to work.
                _data = true;
            }
    
            $elements.each(function (index, element) {
                var events;
    
                if (_data) {
                    events = jQuery._data(element, 'events')[eventType];
                } else {
                    events = jQuery(element).data('events')[eventType];
                }
    
                events.unshift(events.pop());
    
                if (_data) {
                    jQuery._data(element, 'events')[eventType] = events;
                } else {
                    jQuery(element).data('events')[eventType] = events;
                }
            });
        }
    });
    

  11. 11.이 바인딩에 권장되는 방법은 아니다 : 어떤 특별한 경우에, 때 클릭 이벤트 (이벤트 바인딩이 다른 사람의 코드에서 만들어진) 결합하는 방법을 변경할 수 없습니다, 당신은 HTML 요소를 변경할 수 있습니다, 여기에 가능한 해결책은 (경고입니다 이벤트는, 다른 개발자)이 당신을 살해 할 수 있습니다 :

    이 바인딩에 권장되는 방법은 아니다 : 어떤 특별한 경우에, 때 클릭 이벤트 (이벤트 바인딩이 다른 사람의 코드에서 만들어진) 결합하는 방법을 변경할 수 없습니다, 당신은 HTML 요소를 변경할 수 있습니다, 여기에 가능한 해결책은 (경고입니다 이벤트는, 다른 개발자)이 당신을 살해 할 수 있습니다 :

    <span onclick="yourEventHandler(event)">Button</span>
    

    이 처음 실행될 수 있도록 바인딩의 방법으로, 이벤트 핸들러는 먼저 추가됩니다.


  12. 12.여기 JQuery와 1.5 소개하고 약속하고, 내가 실행 제어 명령에 본 것 중에 가장 간단한 구현입니다. http://api.jquery.com/jquery.when/에서 전체 문서

    여기 JQuery와 1.5 소개하고 약속하고, 내가 실행 제어 명령에 본 것 중에 가장 간단한 구현입니다. http://api.jquery.com/jquery.when/에서 전체 문서

    $.when( $('#myDiv').css('background-color', 'red') )
     .then( alert('hi!') )
     .then( myClickFunction( $('#myID') ) )
     .then( myThingToRunAfterClick() );
    
  13. from https://stackoverflow.com/questions/290254/how-to-order-events-bound-with-jquery by cc-by-sa and MIT license