복붙노트

[JQUERY] 객체에 등록 된 이벤트 핸들러를 찾을 수 JQuery와

JQUERY

객체에 등록 된 이벤트 핸들러를 찾을 수 JQuery와

해결법


  1. 1.jQuery를 1.8로, 이벤트 데이터는 데이터에 대한 "공개 API '에서 더 이상 사용할 수 없습니다. 이 jQuery를 블로그 게시물을 읽어보십시오. 이제 대신를 사용한다 :

    jQuery를 1.8로, 이벤트 데이터는 데이터에 대한 "공개 API '에서 더 이상 사용할 수 없습니다. 이 jQuery를 블로그 게시물을 읽어보십시오. 이제 대신를 사용한다 :

    jQuery._data( elem, "events" );
    

    ELEM은 HTML 요소가 아닌 jQuery를 객체 또는 선택해야합니다.

    이 내부, '개인'구조이며, 수정할 수 없습니다 것을 유의하시기 바랍니다. 디버깅 목적으로 만 사용합니다.

    어떤 jQuery를 이전 버전에서는 기존의 방법을 사용해야 할 수도 있습니다 :

    jQuery( elem ).data( "events" );
    

  2. 2.이 같은, (jQuery를 1.8 이상 기준) 이벤트를 크롤링하여 그것을 할 수 있습니다 :

    이 같은, (jQuery를 1.8 이상 기준) 이벤트를 크롤링하여 그것을 할 수 있습니다 :

    $.each($._data($("#id")[0], "events"), function(i, event) {
      // i is the event type, like "click"
      $.each(event, function(j, h) {
        // h.handler is the function being called
      });
    });
    

    여기에 당신이 재생할 수있는 예입니다 :

    () {(기능 $ $ ( "# 엘")을 클릭 (함수 () {경고 () "를 클릭";}).; $ ( "# 엘") 마우스 오버 (함수 () {경고 ( "마우스 오버");}).; $ .each ($ ._ 데이터 ($ ( "# EL") [0], '이벤트'), 기능 (I, 이벤트) { 출력 (I); .each $ (이벤트, 함수 (J, H) { 출력 ( "-"+ h.handler); }); }); }); 출력 기능 (텍스트) { $ ( "# 출력"). HTML (함수 (I, H) { 반환 시간 + 텍스트 + "
    "; }); } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

    테스트 <코드> <스팬 ID = "출력">


  3. 3.jQuery를 1.8 이상,이 더 이상 작동하지 않습니다 내부 데이터가 다른 객체에 배치되지 않기 때문에.

    jQuery를 1.8 이상,이 더 이상 작동하지 않습니다 내부 데이터가 다른 객체에 배치되지 않기 때문에.

    최신 비공식가 지금하고있는 방식 (그러나 적어도 1.7.2에서뿐만 아니라 이전 버전에서 작동) - $ ._ 데이터 (요소, "이벤트")

    밑줄 ( "_")는 여기에 차이를 만드는 것입니다. 내부적으로는 $ .DATA를 호출 (요소, 이름은 널 (null), 사실은), 마지막 (제 4 호) 매개 변수는 내부 하나 ( "PVT은")입니다.


  4. 4.뻔뻔한 플러그,하지만 당신은 findHandlerJS을 사용할 수 있습니다

    뻔뻔한 플러그,하지만 당신은 findHandlerJS을 사용할 수 있습니다

    그것을 사용하려면 그냥 findHandlersJS을 포함해야합니다 (또는 복사 및 크롬의 콘솔 창에 원시 자바 스크립트 코드를 붙여 넣기) 및 이벤트 유형 및 관심있는 요소에 대한 JQuery와 선택기를 지정합니다.

    귀하의 예를 들어, 당신은 신속하게 수행하여 언급 된 이벤트 핸들러를 찾을 수

    findEventHandlers("click", "#el")
    findEventHandlers("mouseover", "#el")
    

    이 반환됩니다 것입니다 :

    당신은 여기를 시도 할 수 있습니다


  5. 5.나는이 목적을 위해 eventbug 플러그인에 불을 지르고 사용합니다.

    나는이 목적을 위해 eventbug 플러그인에 불을 지르고 사용합니다.


  6. 6.나는 하나의 함수에 @jps에서 두 솔루션을 결합했습니다 :

    나는 하나의 함수에 @jps에서 두 솔루션을 결합했습니다 :

    jQuery.fn.getEvents = function() {
        if (typeof(jQuery._data) === 'function') {
            return jQuery._data(this.get(0), 'events') || {};
        }
    
        // jQuery version < 1.7.?
        if (typeof(this.data) === 'function') {
            return this.data('events') || {};
        }
    
        return {};
    };
    

    하지만 조심,이 기능은 jQuery를 자체를 사용하여 설정 한 이벤트를 반환 할 수 있습니다.


  7. 7.1.9으로 이전 동작을 복원 플러그인 마이그레이션을 사용하는 이외의 이벤트를 검색 할 문서화 된 방법이 없습니다. JPS 언급으로 당신은 _.data () 메소드를 사용할 수 있지만 그 내부 방법이다. 그러니 그냥 옳은 일을하고이 기능이 필요한 경우 마이그레이션 플러그인을 사용합니다.

    1.9으로 이전 동작을 복원 플러그인 마이그레이션을 사용하는 이외의 이벤트를 검색 할 문서화 된 방법이 없습니다. JPS 언급으로 당신은 _.data () 메소드를 사용할 수 있지만 그 내부 방법이다. 그러니 그냥 옳은 일을하고이 기능이 필요한 경우 마이그레이션 플러그인을 사용합니다.

    .DATA에 jQuery를 문서에서 ( "이벤트")


  8. 8.요소의 이벤트를 확인하려면 :

    요소의 이벤트를 확인하려면 :

    var events = $._data(element, "events")
    

    예를 들면 :

     var events = $._data(document.getElementById("myElemId"), "events")
    

    또는

     var events = $._data($("#myElemId")[0], "events")
    

    전체 예 :

    <html>
        <head>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
            <script>
                $(function() {
                    $("#textDiv").click(function() {
                        //Event Handling
                    });
                    var events = $._data(document.getElementById('textDiv'), "events");
                    var hasEvents = (events != null);
                });
            </script>
        </head>
        <body>
            <div id="textDiv">Text</div>
        </body>
    </html>
    

    $ (문서) CSTE 연구진과 함께 설치된 동적 수신기를 포함하고 확인하는보다 완전한 방식으로,

    function getEvents(element) {
        var elemEvents = $._data(element, "events");
        var allDocEvnts = $._data(document, "events");
        for(var evntType in allDocEvnts) {
            if(allDocEvnts.hasOwnProperty(evntType)) {
                var evts = allDocEvnts[evntType];
                for(var i = 0; i < evts.length; i++) {
                    if($(element).is(evts[i].selector)) {
                        if(elemEvents == null) {
                            elemEvents = {};
                        }
                        if(!elemEvents.hasOwnProperty(evntType)) {
                            elemEvents[evntType] = [];
                        }
                        elemEvents[evntType].push(evts[i]);
                    }
                }
            }
        }
        return elemEvents;
    }
    

    사용 예제 :

    getEvents($('#myElemId')[0])
    

  9. 9.나는 정의의 jQuery 셀렉터를 만든을 추가하기위한 기본 방법을 사용하여 할당 된 이벤트 핸들러뿐만 아니라 요소를 모두 jQuery의 캐시에 대한 검사 :

    나는 정의의 jQuery 셀렉터를 만든을 추가하기위한 기본 방법을 사용하여 할당 된 이벤트 핸들러뿐만 아니라 요소를 모두 jQuery의 캐시에 대한 검사 :

    (function($){
    
        $.find.selectors[":"].event = function(el, pos, match) {
    
            var search = (function(str){
                if (str.substring(0,2) === "on") {str = str.substring(2);}
                return str;
            })(String(match[3]).trim().toLowerCase());
    
            if (search) {
                var events = $._data(el, "events");
                return ((events && events.hasOwnProperty(search)) || el["on"+search]);
            }
    
            return false;
    
        };
    
    })(jQuery);
    

    예:

    $(":event(click)")
    

    이것은 그들에 부착 된 클릭 핸들러가 요소를 반환합니다.


  10. 10.당신이 할 수도 인 ECMAScript 5.1 / Array.prototype.map 현대적인 브라우저 사용 중

    당신이 할 수도 인 ECMAScript 5.1 / Array.prototype.map 현대적인 브라우저 사용 중

    jQuery._data(DOCUMENTELEMENT,'events')["EVENT_NAME"].map(function(elem){return elem.handler;});
    

    핸들러의 소스를 인쇄 할 브라우저 콘솔에서, 쉼표로 구분. 모두가 특정 이벤트에서 실행중인 무엇이기는 유용합니다.


  11. 11.이벤트는 사용하여 검색 할 수 있습니다 :

    이벤트는 사용하여 검색 할 수 있습니다 :

    jQuery(elem).data('events');
    

    또는 jQuery를 1.8 이상 :

    jQuery._data(elem, 'events');
    

    노트 : 이벤트 $ ( '선택')를 사용하여 경계. 라이브 ( '이벤트', 핸들러) 사용하여 검색 할 수 있습니다 :

    jQuery(document).data('events')
    

  12. 12.나는 대답의 대부분은 재미있다 '라고해야하지만, 최근에 나는 비슷한 문제를 가지고 있었고 솔루션은 DOM 방법을 이동하여 매우 간단했다. 그렇지 반복 처리를 할 수 있지만, 당신이 필요로하는 행사에서 직접 목표로하기 때문에 다른,하지만 난 더 일반적인 대답을 줄 것이다 아래.

    나는 대답의 대부분은 재미있다 '라고해야하지만, 최근에 나는 비슷한 문제를 가지고 있었고 솔루션은 DOM 방법을 이동하여 매우 간단했다. 그렇지 반복 처리를 할 수 있지만, 당신이 필요로하는 행사에서 직접 목표로하기 때문에 다른,하지만 난 더 일반적인 대답을 줄 것이다 아래.

    나는 행의 이미지를했다 :

    <table>
      <td><tr><img class="folder" /></tr><tr>...</tr></td>
    </table>
    

    그리고 그 이미지는 클릭 이벤트 핸들러에 첨부했다 :

    imageNode.click(function () { ... });
    

    내 의도는 내가 먼저 모든 이미지와 상대 행을 가지고 있으므로, 전체 행에 클릭 가능한 영역을 확장했다 :

    tableNode.find("img.folder").each(function () {
      var tr;
    
      tr = $(this).closest("tr");
      // <-- actual answer
    });
    

    지금은 단지 원래의 질문에 대한 답을주고, 다음과 같이했던 실제 응답 라인 :

    tr.click(this.onclick);
    

    내가 DOM 요소에서 직접 이벤트 핸들러를 가져와 jQuery를 클릭 이벤트 처리기에 넣어 그래서. 매력처럼 작동합니다.

    이제, 일반적인 경우에. 기존 사전의 jQuery 일에서 당신은 우리에게 재능이 간단하면서도 강력한 기능 더글러스 크록 포드에 의해 필사자 객체에 연결된 모든 이벤트를 얻을 수 있습니다 :

    function walkTheDOM(node, func)
    {
      func(node);
      node = node.firstChild;
      while (node)
      {
        walkTheDOM(node, func);
        node = node.nextSibling;
      }
    }
    
    function purgeEventHandlers(node)
    {
      walkTheDOM(node, function (n) {
        var f;
    
        for (f in n)
        {
          if (typeof n[f] === "function")
          {
            n[f] = null;
          }
        }
      });
    }
    

  13. 13.당신이 크롬을 사용하는 경우 JQuery와 디버거 플러그인보십시오 : https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi?hl=en

    당신이 크롬을 사용하는 경우 JQuery와 디버거 플러그인보십시오 : https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi?hl=en


  14. 14.jQuery를 사용하면 단지 주어진 요소에 대한 이벤트에 액세스시키는되지 않습니다. 당신은 문서화되지 않은 내부 방법을 사용하여 액세스 할 수 있습니다

    jQuery를 사용하면 단지 주어진 요소에 대한 이벤트에 액세스시키는되지 않습니다. 당신은 문서화되지 않은 내부 방법을 사용하여 액세스 할 수 있습니다

    $._data(element, "events")
    

    하지만 여전히 당신에게 할당 이벤트를 표시하지 않습니다 정확히 말하면, 당신에게 모든 이벤트를 제공하지 않습니다

    $([selector|element]).on()
    
    

    당신은을 통해 검색하여 그들을 가져올 수 있도록 이러한 이벤트는, 문서 내부에 저장됩니다

    $._data(document, "events")
    

    전체 웹 페이지의 이벤트가로하지만 그건 힘든 일이다.

    필터가 지정된 요소와 두 가지 방법의 병합 출력의 이벤트를 기록하지만 출력에 이벤트를 복제의 결함을 가지고 있었다 (그리고 효과적으로 요소의 jQuery를 내부 이벤트 목록에서 응용 프로그램 덤비는)이 생성 기능 위의 톰 G. 그 결함을 고정하고 아래의 코드를 찾을 수 있습니다. 그냥 dev에 콘솔에 또는 앱 코드에 붙여 주어진 요소에 대한 모든 이벤트의 좋은 목록을 얻기 위해 필요한 경우를 실행합니다.

    무엇 통지에 중요한 것은, 요소는 실제로는 HTMLElement하지 jQuery를 개체입니다.

    function getEvents(element) {
        var elemEvents = $._data(element, "events");
        var allDocEvnts = $._data(document, "events");
        function equalEvents(evt1, evt2)
        {
            return evt1.guid === evt2.guid;
        }
    
        for(var evntType in allDocEvnts) {
            if(allDocEvnts.hasOwnProperty(evntType)) {
                var evts = allDocEvnts[evntType];
                for(var i = 0; i < evts.length; i++) {
                    if($(element).is(evts[i].selector)) {
                        if(elemEvents == null) {
                            elemEvents = {};
                        }
                        if(!elemEvents.hasOwnProperty(evntType)) {
                            elemEvents[evntType] = [];
                        }
                        if(!elemEvents[evntType].some(function(evt) { return equalEvents(evt, evts[i]); })) {
                            elemEvents[evntType].push(evts[i]);
                        }
                    }
                }
            }
        }
        return elemEvents;
    }
    

  15. 15.그것을 할 수있는 또 다른 방법은 다음 얻기 위해 실제 자바 스크립트를 통해 가서 세트와 이벤트 핸들러와 함께 플레이 요소를 잡기 위해 jQuery를 사용하는 것입니다. 예를 들어 :

    그것을 할 수있는 또 다른 방법은 다음 얻기 위해 실제 자바 스크립트를 통해 가서 세트와 이벤트 핸들러와 함께 플레이 요소를 잡기 위해 jQuery를 사용하는 것입니다. 예를 들어 :

    var oldEventHandler = $('#element')[0].onclick;
    // Remove event handler
    $('#element')[0].onclick = null;
    // Switch it back
    $('#element')[0].onclick = oldEventHandler;
    

  16. 16.나는 위의 몇 가지 답변을 결합이 찾고 미친하지만 기능 스크립트를 만들어 지정된 요소에 이벤트 리스너의 희망 대부분 나와. 여기 최적화 주시기 바랍니다.

    나는 위의 몇 가지 답변을 결합이 찾고 미친하지만 기능 스크립트를 만들어 지정된 요소에 이벤트 리스너의 희망 대부분 나와. 여기 최적화 주시기 바랍니다.

    VAR 요소 = $ ( "# 일부 요소"); // 샘플 이벤트 핸들러 element.on ( "마우스 오버"함수 () { 경고 ( "foo는"); }); $ ( ". 부모 엘리먼트"). ( "mousedown", "기간"에 대한 함수 () { 경고 ( "바"); }); $ (문서) CSTE 연구진 ({) (,, "범위"를 "클릭"기능 경고 ( "XYZ"); }); VAR 컬렉션 element.parents = () .add (요소) .add ($ (문서)); collection.each (함수 () { VAR currentEl = $ (이)? $ (이) : $ (문서); VAR 태그 이름은 $ (이) [0]를 .tagName =? $ (이) [0] .tagName "DOCUMENT"; VAR 이벤트 = $ ._ 데이터 ($ (이) [0], "이벤트"); VAR isItself = $ (이) [0] === 요소 [0] (! 이벤트) 반환하는 경우; .each (이벤트, 함수를 $ (I, 이벤트) { (! 이벤트) 반환하는 경우; .each $ (이벤트, 함수 (J, H) { VAR은 = false를 발견; 경우 (h.selector && h.selector.length> 0) { currentEl.find (h.selector) .each (함수 () { 경우 ($ (이) [0] === 요소 [0]) { = 사실 발견; } }); } 다른 경우 (! h.selector && isItself) { = 사실 발견; } 경우 (발견) { CONSOLE.LOG ( "################"+ 태그 이름); 을 console.log ( "이벤트 :"+ i)를; 을 console.log ( "선택 : '"+ h.selector + "'"); CONSOLE.LOG (h.handler); } }); }); }); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

    <스팬 ID = "일부 요소">

  17. from https://stackoverflow.com/questions/2518421/jquery-find-events-handlers-registered-with-an-object by cc-by-sa and MIT license