我希望使用
- 单击它。
- 从它上面单击出去。
- 通过 Tab 键进入它。
- 通过 Tab 键离开它。
- 在键盘上使用 Ctrl+C 和Ctrl+V
- 右键单击-> 粘贴。
- 右键单击-> 剪切。
- 右键单击-> 复制。
- 从另一个应用程序拖放文本。
- 使用Javascript修改。
- 使用Firebug等调试工具进行修改。
console.log来显示它。这在JavaScript / jQuery中是否可能，如果是，我该怎么做？我不知道为什么没有人使用这个...（也许是因为它只是 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
monitorEvents($0, 'mouse'); 的内容来记录检查过的元素的所有事件（右键单击>“检查”）。 (http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents) - rinogo$(element).on("click mousedown mouseup focus blur keydown change",function(e){
console.log(e);
});
这将为您提供许多（但不是全部）关于事件是否被触发的信息......除非像这样手动编码，我想不出其他任何方法来做到这一点。
blur添加到您的事件列表中。 - nnnnnn有一种很好的通用方法是使用`.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”。然后每个事件都会被记录到控制台中（有时会有点烦人，因为它会记录每个鼠标移动...）。
$('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编程中称为钩子）监视所有事件。此钩子不会影响您软件/程序的操作。
在控制台日志中，您可以看到类似以下内容：
所看到的内容解释如下：
在控制台日志中，您将看到您选择的所有事件（请参见下面的"如何使用"），并显示对象类型、类名(s)、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);
备注/注意事项：
希望对您有所帮助！ ;-)
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
}
});
HTMLElement.prototype.addEventListener，可能不适合用于生产环境，但是对于调试目的它已经帮了我很大的忙。 - Günter ZöchbauerHTML元素的事件：
事件：$(document).on('ch-ui-container-closed ch-ui-container-opened', function(evt){
console.log(evt);
});
祝你好运...
$('input').live('click mousedown mouseup focus keydown change blur', function(e) {
console.log(e);
});
function 这个单词，而且错法一模一样 :)。 - Daniel T..data（“events”）来获取事件列表。 - Shawn Khameneh$('input').data('events')，但它返回未定义。 - Daniel T.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的switch case仅打印特定事件的信息。
on()方法来绑定事件，并在回调函数中记录事件名称和任何相关数据。你可以将日志输出到控制台或发送到服务器以进行后续分析。以下是示例代码：$('your-element').on('click', function(event) { console.log('Event name: ' + event.type); console.log('Event data: ', event.data); // 发送日志到服务器的代码（可选） });- neaumusic