我想查看输入字段在用户与其交互时触发的所有事件。这包括以下内容:
- 点击它。
- 点击关闭它。
- 进入它。
- 远离它。
- Ctrl+C和Ctrl+V在键盘上。
- 右键单击 -> 粘贴。
- 右键单击 -> 剪切。
- 右键单击-> 复制。
- 从另一个应用程序拖放文本。
- 用 Javascript 修改它。
- 使用调试工具(如 Firebug)修改它。
我想使用console.log
. 这在 Javascript/jQuery 中是否可行,如果可以,我该怎么做?
我想查看输入字段在用户与其交互时触发的所有事件。这包括以下内容:
- 点击它。
- 点击关闭它。
- 进入它。
- 远离它。
- 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
$(element).on("click mousedown mouseup focus blur keydown change",function(e){
console.log(e);
});
这会给你很多(但不是全部)关于是否触发事件的信息......除了像这样手动编码之外,我想不出任何其他方法来做到这一点。
使用 .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 元素并选中“日志事件”。然后每个事件都会被记录到控制台(这有时有点烦人,因为它会记录每个鼠标移动......)。
$('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'));