Làm cách nào để ghi nhật ký tất cả các sự kiện được kích hoạt bởi một phần tử trong jQuery?

Tôi muốn xem tất cả các sự kiện được kích hoạt bởi một trường đầu vào khi người dùng tương tác với nó. Điều này bao gồm những thứ như:

1. Nhấp vào nó.
2. Nhấp vào nó.
3. Đánh dấu vào nó.
4. Tránh xa nó.
5. Ctrl+ Cvà Ctrl+ Vtrên bàn phím.
6. Nhấp chuột phải -> Dán.
7. Nhấp chuột phải -> Cắt.
8. Nhấp chuột phải -> Sao chép.
9. Kéo và thả văn bản từ một ứng dụng khác.
10. Sửa đổi nó bằng Javascript.
11. Sửa đổi nó bằng một công cụ gỡ lỗi, như Firebug.

Tôi muốn hiển thị nó bằng cách sử dụng console.log. Điều này có thể xảy ra trong Javascript / jQuery không và nếu có, tôi phải làm như thế nào?

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

Điều đó sẽ cung cấp cho bạn rất nhiều (nhưng không phải tất cả) thông tin về việc nếu một sự kiện được kích hoạt ... ngoài việc mã hóa nó theo cách thủ công như thế này, tôi không thể nghĩ ra cách nào khác để làm điều đó.

Tôi không biết tại sao không ai sử dụng cái này ... (có thể vì nó chỉ là một thứ trên webkit)

Mở bảng điều khiển:

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

Có một cách chung hay là sử dụng bộ sưu tập .data ('sự kiện'):

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

Điều này ghi lại mọi sự kiện đã được jQuery liên kết với phần tử tại thời điểm sự kiện cụ thể này được kích hoạt. Mã này rất hữu ích cho tôi nhiều lần.

Btw: Nếu bạn muốn xem mọi sự kiện có thể xảy ra trên một đối tượng, hãy sử dụng firebug: chỉ cần nhấp chuột phải vào phần tử DOM trong tab html và kiểm tra "Log Events". Mọi sự kiện sau đó đều được ghi vào bảng điều khiển (điều này đôi khi hơi khó chịu vì nó ghi lại mọi chuyển động của chuột ...).

$('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);
}); 

Tôi biết câu trả lời đã được chấp nhận cho điều này, nhưng tôi nghĩ có thể có một cách đáng tin cậy hơn một chút mà bạn không nhất thiết phải biết trước tên của sự kiện. Điều này chỉ hoạt động cho các sự kiện gốc mặc dù theo như tôi biết, không phải các sự kiện tùy chỉnh đã được tạo bởi plugin. Tôi đã chọn bỏ qua việc sử dụng jQuery để đơn giản hóa mọi thứ một chút.

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

Tôi hy vọng điều này sẽ giúp bất cứ ai đọc điều này.

BIÊN TẬP

Vì vậy, tôi đã thấy một câu hỏi khác ở đây tương tự, vì vậy một đề xuất khác sẽ là làm như sau:

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

Chủ đề cũ, tôi biết. Tôi cũng cần một cái gì đó để theo dõi các sự kiện và đã viết giải pháp rất tiện dụng (tuyệt vời) này. Bạn có thể giám sát tất cả các sự kiện với hook này (trong lập trình windows, hook này được gọi là hook). Móc này không ảnh hưởng đến hoạt động của phần mềm / chương trình của bạn.

Trong nhật ký bảng điều khiển, bạn có thể thấy một cái gì đó như sau:

Giải thích về những gì bạn thấy:

Trong nhật ký bảng điều khiển, bạn sẽ thấy tất cả các sự kiện bạn chọn (xem phần "cách sử dụng" bên dưới ) và hiển thị kiểu đối tượng, (các) tên lớp, id, <: tên hàm>, <: tên sự kiện>. Định dạng của các đối tượng giống như css.

Khi bạn nhấp vào một nút hoặc bất kỳ sự kiện liên kết nào, bạn sẽ thấy nó trong nhật ký bảng điều khiển.

Mã tôi đã viết:

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

Ví dụ về cách sử dụng nó:

Giám sát tất cả các sự kiện:

setJQueryEventHandlersDebugHooks();

Chỉ giám sát tất cả các trình kích hoạt:

setJQueryEventHandlersDebugHooks(true,false,false);

Chỉ giám sát tất cả các sự kiện BẬT:

setJQueryEventHandlersDebugHooks(false,true,false);

Chỉ giám sát tất cả các mối liên kết TẮT:

setJQueryEventHandlersDebugHooks(false,false,true);

Nhận xét / Thông báo:

• Chỉ sử dụng tính năng này để gỡ lỗi, hãy tắt tính năng này khi sử dụng trong phiên bản cuối cùng của sản phẩm
• Nếu bạn muốn xem tất cả các sự kiện, bạn phải gọi hàm này trực tiếp sau khi jQuery được tải
• Nếu bạn chỉ muốn xem ít sự kiện hơn, bạn có thể gọi hàm vào thời điểm bạn cần
• Nếu bạn muốn tự động thực thi nó, hãy đặt () (); chức năng xung quanh

Hy vọng nó giúp! ;-)

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

Chỉ cần thêm điều này vào trang và không phải lo lắng gì khác, phần còn lại sẽ giải quyết cho bạn:

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

Bạn cũng có thể sử dụng console.log ('Sự kiện đầu vào:' + e.type) để dễ dàng hơn.

BƯỚC 1: Kiểm tra eventsmột HTML elementtrên developer console:

BƯỚC 2: Lắng nghe eventschúng tôi muốn nắm bắt:

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

Chúc may mắn...

Gần đây tôi đã tìm thấy và sửa đổi đoạn mã này từ một bài đăng SO hiện có mà tôi không thể tìm lại được nhưng tôi thấy nó rất hữu ích

// 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'))

Điều này sử dụng một chút ES6 để làm đẹp, nhưng cũng có thể dễ dàng được dịch cho các trình duyệt cũ. Trong chức năng được đính kèm với trình nghe sự kiện, hiện chỉ cần đăng xuất loại sự kiện đã xảy ra nhưng đây là nơi bạn có thể in ra thông tin bổ sung hoặc sử dụng hộp chuyển đổi trên e.type, bạn chỉ có thể in thông tin về các sự kiện cụ thể

Đây là một cách không cần truy vấn để theo dõi các sự kiện trong bảng điều khiển bằng mã của bạn và không sử dụng monitorEvents () vì cách đó chỉ hoạt động trong Bảng điều khiển dành cho nhà phát triển Chrome. Bạn cũng có thể chọn không theo dõi các sự kiện nhất định bằng cách chỉnh sửa mảng 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