jQuery의 요소에 의해 발생한 모든 이벤트를 어떻게 기록합니까?

사용자 가 입력 필드 와 상호 작용할 때 입력 필드에서 발생하는 모든 이벤트를보고 싶습니다 . 여기에는 다음과 같은 항목이 포함됩니다.

1. 그것을 클릭합니다.
2. 그것을 클릭합니다.
3. 그것에 탭.
4. 그것에서 멀리 탭.
5. Ctrl키보드의 + C및 Ctrl+ V.
6. 오른쪽 클릭-> 붙여 넣기.
7. 오른쪽 클릭-> 잘라 내기.
8. 오른쪽 클릭-> 복사.
9. 다른 응용 프로그램에서 텍스트 끌어서 놓기.
10. Javascript로 수정.
11. Firebug와 같은 디버그 도구로 수정합니다.

을 사용하여 표시하고 싶습니다 console.log. Javascript / jQuery에서 가능합니까? 그렇다면 어떻게해야합니까?

$(element).on("click mousedown mouseup focus blur keydown change",function(e){
     console.log(e);
});

이벤트가 발생했는지에 대한 정보를 많이 (전부는 아님) 얻을 수 있습니다. 이렇게 수동으로 코딩하는 것 외에는 다른 방법을 생각할 수 없습니다.

아무도 이것을 사용하지 않는 이유를 모르겠습니다 ... (아마도 웹킷 일뿐이기 때문에)

콘솔 열기 :

monitorEvents(document.body); // logs all events on the body

monitorEvents(document.body, 'mouse'); // logs mouse events on the body

monitorEvents(document.body.querySelectorAll('input')); // logs all events on inputs

.data ( 'events') 컬렉션을 사용하는 좋은 일반적인 방법이 있습니다.

function getEventsList($obj) {
    var ev = new Array(),
        events = $obj.data('events'),
        i;
    for(i in events) { ev.push(i); }
    return ev.join(' ');
}

$obj.on(getEventsList($obj), function(e) {
    console.log(e);
});

이 특정 이벤트가 발생하는 순간 jQuery에 의해 요소에 이미 바인딩 된 모든 이벤트를 기록합니다. 이 코드는 저에게 여러 번 도움이되었습니다.

Btw : 개체에서 발생하는 모든 가능한 이벤트를 보려면 firebug를 사용하십시오. html 탭에서 DOM 요소를 마우스 오른쪽 버튼으로 클릭하고 "Log Events"를 선택하십시오. 그런 다음 모든 이벤트가 콘솔에 기록됩니다 (모든 마우스 움직임을 기록하기 때문에 때때로 약간 짜증이납니다 ...).

$('body').on("click mousedown mouseup focus blur keydown change mouseup click dblclick mousemove mouseover mouseout mousewheel keydown keyup keypress textInput touchstart touchmove touchend touchcancel resize scroll zoom focus blur select change submit reset",function(e){
     console.log(e);
}); 

이에 대한 답은 이미 받아 들여졌지만 이벤트 이름을 미리 알 필요가없는 약간 더 안정적인 방법이있을 수 있다고 생각합니다. 이것은 내가 아는 한 기본 이벤트에서만 작동하며 플러그인으로 만든 사용자 정의 이벤트에는 적용되지 않습니다. 나는 jQuery의 사용을 생략하기로 결정했다.

let input = document.getElementById('inputId');

Object.getOwnPropertyNames(input)
  .filter(key => key.slice(0, 2) === 'on')
  .map(key => key.slice(2))
  .forEach(eventName => {
    input.addEventListener(eventName, event => {
      console.log(event.type);
      console.log(event);
    });
  });

나는 이것이 이것을 읽는 모든 사람에게 도움이되기를 바랍니다.

편집하다

그래서 여기 에서 비슷한 다른 질문을 보았 으므로 다른 제안은 다음을 수행하는 것입니다.

monitorEvents(document.getElementById('inputId'));

오래된 실, 알아요. 이벤트를 모니터링 할 무언가가 필요했고이 매우 편리한 (우수한) 솔루션을 작성했습니다. 이 후크로 모든 이벤트를 모니터링 할 수 있습니다 (Windows 프로그래밍에서는 후크라고 함). 이 후크는 소프트웨어 / 프로그램의 작동에 영향을주지 않습니다.

에서 콘솔 로그인 이 같은 것을 볼 수 있습니다 :

당신이 보는 것에 대한 설명 :

콘솔 로그에서 선택한 모든 이벤트를 볼 수 있습니다 (아래 "사용 방법" 참조). )와 객체 유형, 클래스 이름, ID, <: 기능 이름>, <: 이름>이 표시됩니다. 개체의 서식은 CSS와 유사합니다.

버튼이나 바인딩 된 이벤트를 클릭하면 콘솔 로그에 표시됩니다.

내가 작성한 코드 :

function setJQueryEventHandlersDebugHooks(bMonTrigger, bMonOn, bMonOff)
{
   jQuery.fn.___getHookName___ = function()    
       {
          // First, get object name
         var sName = new String( this[0].constructor ),
         i = sName.indexOf(' ');
         sName = sName.substr( i, sName.indexOf('(')-i );    

         // Classname can be more than one, add class points to all
         if( typeof this[0].className === 'string' )
         {
           var sClasses = this[0].className.split(' ');
           sClasses[0]='.'+sClasses[0];
           sClasses = sClasses.join('.');
           sName+=sClasses;
         }
         // Get id if there is one
         sName+=(this[0].id)?('#'+this[0].id):'';
         return sName;
       };

   var bTrigger        = (typeof bMonTrigger !== "undefined")?bMonTrigger:true,
       bOn             = (typeof bMonOn !== "undefined")?bMonOn:true,
       bOff            = (typeof bMonOff !== "undefined")?bMonOff:true,
       fTriggerInherited = jQuery.fn.trigger,
       fOnInherited    = jQuery.fn.on,
       fOffInherited   = jQuery.fn.off;

   if( bTrigger )
   {
    jQuery.fn.trigger = function()
    {
     console.log( this.___getHookName___()+':trigger('+arguments[0]+')' );
     return fTriggerInherited.apply(this,arguments);
    };
   }

   if( bOn )
   {
    jQuery.fn.on = function()
    {
     if( !this[0].__hooked__ ) 
     {
       this[0].__hooked__ = true; // avoids infinite loop!
       console.log( this.___getHookName___()+':on('+arguments[0]+') - binded' );
       $(this).on( arguments[0], function(e)
       {
         console.log( $(this).___getHookName___()+':'+e.type );
       });
     }
     var uResult = fOnInherited.apply(this,arguments);
     this[0].__hooked__ = false; // reset for another event
     return uResult;
    };
   }

   if( bOff )
   {
    jQuery.fn.off = function()
    {
     if( !this[0].__unhooked__ ) 
     {
       this[0].__unhooked__ = true; // avoids infinite loop!
       console.log( this.___getHookName___()+':off('+arguments[0]+') - unbinded' );
       $(this).off( arguments[0] );
     }

     var uResult = fOffInherited.apply(this,arguments);
     this[0].__unhooked__ = false; // reset for another event
     return uResult;
    };
   }
}

사용 방법의 예 :

모든 이벤트 모니터링 :

setJQueryEventHandlersDebugHooks();

모든 트리거 만 모니터링 :

setJQueryEventHandlersDebugHooks(true,false,false);

모든 ON 이벤트 만 모니터링 :

setJQueryEventHandlersDebugHooks(false,true,false);

모든 OFF 바인딩 해제 만 모니터링 :

setJQueryEventHandlersDebugHooks(false,false,true);

비고 / 공지 :

• 디버깅 용으로 만 사용하고, 제품 최종 버전에서 사용할 때는 끄십시오.
• 모든 이벤트를 보려면 jQuery가로드 된 직후이 함수를 호출해야합니다.
• 더 적은 이벤트 만보고 싶다면 필요한 시간에 함수를 호출 할 수 있습니다.
• 자동 실행하려면 () (); 주변 기능

도움이 되었기를 바랍니다. ;-)

https://github.com/robertleeplummerjr/wiretap.js

new Wiretap({
  add: function() {
      //fire when an event is bound to element
  },
  before: function() {
      //fire just before an event executes, arguments are automatic
  },
  after: function() {
      //fire just after an event executes, arguments are automatic
  }
});

페이지에 이것을 추가하기 만하면 다른 걱정없이 휴식을 취할 수 있습니다.

$('input').live('click mousedown mouseup focus keydown change blur', function(e) {
     console.log(e);
});

console.log ( 'Input event :'+ e.type)을 사용하여 더 쉽게 할 수도 있습니다.

1 단계 : 확인 events위해 HTML element온 developer console:

2 단계 : events캡처하려는 내용을 듣습니다 .

$(document).on('ch-ui-container-closed ch-ui-container-opened', function(evt){
 console.log(evt);
});

행운을 빕니다...

최근에 다시 찾을 수 없었던 기존 SO 게시물에서이 스 니펫을 찾아 수정했지만 매우 유용하다는 것을 알았습니다.

// specify any elements you've attached listeners to here
const nodes = [document]

// https://developer.mozilla.org/en-US/docs/Web/Events
const logBrowserEvents = () => {
  const AllEvents = {
    AnimationEvent: ['animationend', 'animationiteration', 'animationstart'],
    AudioProcessingEvent: ['audioprocess'],
    BeforeUnloadEvent: ['beforeunload'],
    CompositionEvent: [
      'compositionend',
      'compositionstart',
      'compositionupdate',
    ],
    ClipboardEvent: ['copy', 'cut', 'paste'],
    DeviceLightEvent: ['devicelight'],
    DeviceMotionEvent: ['devicemotion'],
    DeviceOrientationEvent: ['deviceorientation'],
    DeviceProximityEvent: ['deviceproximity'],
    DragEvent: [
      'drag',
      'dragend',
      'dragenter',
      'dragleave',
      'dragover',
      'dragstart',
      'drop',
    ],
    Event: [
      'DOMContentLoaded',
      'abort',
      'afterprint',
      'beforeprint',
      'cached',
      'canplay',
      'canplaythrough',
      'change',
      'chargingchange',
      'chargingtimechange',
      'checking',
      'close',
      'dischargingtimechange',
      'downloading',
      'durationchange',
      'emptied',
      'ended',
      'error',
      'fullscreenchange',
      'fullscreenerror',
      'input',
      'invalid',
      'languagechange',
      'levelchange',
      'loadeddata',
      'loadedmetadata',
      'noupdate',
      'obsolete',
      'offline',
      'online',
      'open',
      'open',
      'orientationchange',
      'pause',
      'play',
      'playing',
      'pointerlockchange',
      'pointerlockerror',
      'ratechange',
      'readystatechange',
      'reset',
      'seeked',
      'seeking',
      'stalled',
      'submit',
      'success',
      'suspend',
      'timeupdate',
      'updateready',
      'visibilitychange',
      'volumechange',
      'waiting',
    ],
    FocusEvent: [
      'DOMFocusIn',
      'DOMFocusOut',
      'Unimplemented',
      'blur',
      'focus',
      'focusin',
      'focusout',
    ],
    GamepadEvent: ['gamepadconnected', 'gamepaddisconnected'],
    HashChangeEvent: ['hashchange'],
    KeyboardEvent: ['keydown', 'keypress', 'keyup'],
    MessageEvent: ['message'],
    MouseEvent: [
      'click',
      'contextmenu',
      'dblclick',
      'mousedown',
      'mouseenter',
      'mouseleave',
      'mousemove',
      'mouseout',
      'mouseover',
      'mouseup',
      'show',
    ],
    // https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events
    MutationNameEvent: ['DOMAttributeNameChanged', 'DOMElementNameChanged'],
    MutationEvent: [
      'DOMAttrModified',
      'DOMCharacterDataModified',
      'DOMNodeInserted',
      'DOMNodeInsertedIntoDocument',
      'DOMNodeRemoved',
      'DOMNodeRemovedFromDocument',
      'DOMSubtreeModified',
    ],
    OfflineAudioCompletionEvent: ['complete'],
    OtherEvent: ['blocked', 'complete', 'upgradeneeded', 'versionchange'],
    UIEvent: [
      'DOMActivate',
      'abort',
      'error',
      'load',
      'resize',
      'scroll',
      'select',
      'unload',
    ],
    PageTransitionEvent: ['pagehide', 'pageshow'],
    PopStateEvent: ['popstate'],
    ProgressEvent: [
      'abort',
      'error',
      'load',
      'loadend',
      'loadstart',
      'progress',
    ],
    SensorEvent: ['compassneedscalibration', 'Unimplemented', 'userproximity'],
    StorageEvent: ['storage'],
    SVGEvent: [
      'SVGAbort',
      'SVGError',
      'SVGLoad',
      'SVGResize',
      'SVGScroll',
      'SVGUnload',
    ],
    SVGZoomEvent: ['SVGZoom'],
    TimeEvent: ['beginEvent', 'endEvent', 'repeatEvent'],
    TouchEvent: [
      'touchcancel',
      'touchend',
      'touchenter',
      'touchleave',
      'touchmove',
      'touchstart',
    ],
    TransitionEvent: ['transitionend'],
    WheelEvent: ['wheel'],
  }

  const RecentlyLoggedDOMEventTypes = {}

  Object.keys(AllEvents).forEach((DOMEvent) => {
    const DOMEventTypes = AllEvents[DOMEvent]

    if (Object.prototype.hasOwnProperty.call(AllEvents, DOMEvent)) {
      DOMEventTypes.forEach((DOMEventType) => {
        const DOMEventCategory = `${DOMEvent} ${DOMEventType}`

        nodes.forEach((node) => {
          node.addEventListener(
            DOMEventType,
            (e) => {
              if (RecentlyLoggedDOMEventTypes[DOMEventCategory]) return

              RecentlyLoggedDOMEventTypes[DOMEventCategory] = true

              // NOTE: throttle continuous events
              setTimeout(() => {
                RecentlyLoggedDOMEventTypes[DOMEventCategory] = false
              }, 1000)

              const isActive = e.target === document.activeElement

              // https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement
              const hasActiveElement = document.activeElement !== document.body

              const msg = [
                DOMEventCategory,
                'target:',
                e.target,
                ...(hasActiveElement
                  ? ['active:', document.activeElement]
                  : []),
              ]

              if (isActive) {
                console.info(...msg)
              }
            },
            true,
          )
        })
      })
    }
  })
}
logBrowserEvents()
// export default logBrowserEvents

function bindAllEvents (el) {
  for (const key in el) {
      if (key.slice(0, 2) === 'on') {
          el.addEventListener(key.slice(2), e => console.log(e.type));
      }
  }
}
bindAllEvents($('.yourElement'))

이것은 아름다움을 위해 약간의 ES6를 사용하지만 레거시 브라우저에서도 쉽게 번역 할 수 있습니다. 이벤트 리스너에 연결된 함수에서는 현재 어떤 종류의 이벤트가 발생했는지 로그 아웃하고 있지만 여기에서 추가 정보를 인쇄하거나에서 스위치 케이스를 사용하여 e.type특정 이벤트에 대한 정보 만 인쇄 할 수 있습니다.

다음은 Chrome 개발자 콘솔에서만 작동하기 때문에 monitorEvents ()를 사용하지 않고 코드를 사용하여 콘솔에서 이벤트를 모니터링하는 비 jquery 방법입니다. no_watch 배열을 편집하여 특정 이벤트를 모니터링하지 않도록 선택할 수도 있습니다.

    function getEvents(obj) {
    window["events_list"] = [];
    var no_watch = ['mouse', 'pointer']; // Array of event types not to watch
    var no_watch_reg = new RegExp(no_watch.join("|"));

    for (var prop in obj) {
        if (prop.indexOf("on") === 0) {
            prop = prop.substring(2); // remove "on" from beginning
            if (!prop.match(no_watch_reg)) {
                window["events_list"].push(prop);
                window.addEventListener(prop, function() {
                    console.log(this.event); // Display fired event in console
                } , false);
            }
        }
    }
    window["events_list"].sort(); // Alphabetical order 

}

getEvents(document); // Put window, document or any html element here
console.log(events_list); // List every event on element