Question

当用户与之交互时，我希望看到输入字段触发的所有事件。这包括以下内容：

点击它。

点击它。

插入其中。

远离它。
  键盘上的
Ctrl + C 和 Ctrl + V 。

右键单击 - ＆gt;糊。

右键单击 - ＆gt;剪切。

右键单击 - ＆gt;副本。

从其他应用程序中拖放文本。

使用Javascript修改它。

使用调试工具修改它，例如Firebug。

我想使用console.log显示它。这可能在Javascript / jQuery中，如果是这样，我该怎么做？

Answer 1

我不知道为什么没有人使用这个...（也许是因为它只是一个webkit的事情）

打开控制台：

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

Answer 2

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

这会让你获得很多（但不是全部）关于事件是否被触发的信息......除了手动编码这样的事情之外，我想不出有任何其他方法可以做到这一点。

Answer 3

使用.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已绑定到该元素的每个事件。这段代码对我很有帮助很多次。

顺便说一句：如果你想看到在一个对象上触发的每个可能事件都使用firebug：只需右键单击html选项卡中的DOM元素并选中“Log Events”。然后每个事件都会记录到控制台（这有时会有点烦人，因为它会记录每次鼠标移动......）。

Answer 4

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

Answer 5

我知道答案已经被接受了，但我认为可能会有一种更可靠的方式，你不必事先知道事件的名称。这仅适用于本机事件，尽管据我所知，而不是由插件创建的自定义事件。我选择省略使用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);
    });
  });

我希望这有助于任何阅读此内容的人。

修改

所以我看到另一个类似的question here，所以另一个建议是做以下事情：

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

Answer 6

老线程，我知道。我还需要一些东西来监控事件，并编写了这个非常方便（优秀）的解决方案。您可以使用此挂钩监视所有事件（在Windows编程中，这称为挂钩）。此挂钩不会影响软件/程序的运行。

在控制台日志中，您可以看到如下内容：

您所看到的内容的解释：

在控制台日志中，您将看到您选择的所有事件（请参阅下面的“如何使用”）并显示对象类型，类名，ID，＆lt;：函数名称＆gt ;，＆lt;：eventname＆gt;。对象的格式与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之后
如果您只想查看较少的事件，可以在需要时调用该功能
如果要自动执行它，请放置（）（）;围绕功能

希望它有所帮助！ ; - ）

Answer 7

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

<VirtualHost>

Answer 8

只需将此添加到页面中，没有其他担忧，将为您处理休息：

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

你也可以使用console.log（'输入事件：'+ e.type）来简化它。

Answer 9

第1步：在`events`上检查`HTML element` `developer console`：

第2步：收听我们想要捕获的`events`：

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

祝你好运......

Answer 10

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上的开关盒，您只能打印特定事件的信息。事件

Answer 11

这是一种非jquery的方法，可使用您的代码在控制台中监视事件，而无需使用monitorEvents（），因为它仅在Chrome Developer Console中有效。您还可以通过编辑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

Answer 12

如何监听 Element (Vanilla JS) 上的所有事件

对于所有原生事件，我们可以通过迭代 target.onevent 属性并为所有这些属性安装我们的侦听器来检索支持的事件列表。

for (const key in target) {
    if(/^on/.test(key)) {
        const eventType = key.substr(2);
        target.addEventListener(eventType, listener);
    }
}

据我所知，发出事件的唯一另一种方式是通过 EventTarget.dispatchEvent，每个 Node 和之前的每个 Element 都继承。
要侦听所有这些手动触发的事件，我们可以全局代理 dispatchEvent 方法，并为我们刚刚看到名称的事件及时安装我们的侦听器 ✨ ^^

const dispatchEvent_original = EventTarget.prototype.dispatchEvent;
EventTarget.prototype.dispatchEvent = function (event) {
    if (!alreadyListenedEventTypes.has(event.type)) {
        target.addEventListener(event.type, listener, ...otherArguments);
        alreadyListenedEventTypes.add(event.type);
    }
    dispatchEvent_original.apply(this, arguments);
};

? 函数片段 ?

function addEventListenerAll(target, listener, ...otherArguments) {

    // install listeners for all natively triggered events
    for (const key in target) {
        if (/^on/.test(key)) {
            const eventType = key.substr(2);
            target.addEventListener(eventType, listener, ...otherArguments);
        }
    }

    // dynamically install listeners for all manually triggered events, just-in-time before they're dispatched ;D
    const dispatchEvent_original = EventTarget.prototype.dispatchEvent;
    function dispatchEvent(event) {
        target.addEventListener(event.type, listener, ...otherArguments);  // multiple identical listeners are automatically discarded
        dispatchEvent_original.apply(this, arguments);
    }
    EventTarget.prototype.dispatchEvent = dispatchEvent;
    if (EventTarget.prototype.dispatchEvent !== dispatchEvent) throw new Error(`Browser is smarter than you think!`);

}


// usage example
const input = document.querySelector('input');
addEventListenerAll(input, (evt) => {
    console.log(evt.type);
});
input.focus();
input.click();
input.dispatchEvent(new Event('omg!', { bubbles: true }));


// usage example with `useCapture`
// (also receives `bubbles: false` events, but in reverse order)
addEventListenerAll(
    input,
    (evt) => { console.log(evt.type); },
    true
);
document.body.dispatchEvent(new Event('omfggg!', { bubbles: false }));

Answer 13

我最近从现有的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

Answer 14

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

如何在jQuery中记录元素触发的所有事件？

14 个答案:

第1步：在`events`上检查`HTML element` `developer console`：

第2步：收听我们想要捕获的`events`：

如何在jQuery中记录元素触发的所有事件？

14 个答案:

第1步：在events上检查HTML element developer console：

第2步：收听我们想要捕获的events：

第1步：在`events`上检查`HTML element` `developer console`：

第2步：收听我们想要捕获的`events`：