age*_*s04 538 jquery events dom
我需要找到在对象上注册的事件处理程序.
例如:
$("#el").click(function() {...});
$("#el").mouseover(function() {...});
$("#el")有点击和鼠标悬停注册.
是否有一个函数来找出它,并可能迭代事件处理程序？
如果通过适当的方法在jQuery对象上不可能,那么在纯DOM对象上是否可能？
jps*_*jps 673
从jQuery 1.8开始,数据的"公共API"不再提供事件数据.阅读这篇jQuery博客文章.你现在应该使用它:
jQuery._data( elem, "events" );
elem 应该是HTML元素,而不是jQuery对象或选择器.
请注意,这是一个内部的"私有"结构,不应修改.仅用于调试目的.
在旧版本的jQuery中,您可能必须使用以下旧方法:
jQuery( elem ).data( "events" );
Nic*_*ver 82
您可以通过抓取事件(从jQuery 1.8+开始)来实现,如下所示:
$.each($._data($("#id")[0], "events"), function(i, event) {
// i is the event type, like "click"
$.each(event, function(j, h) {
// h.handler is the function being called
});
});
这是一个你可以玩的例子:
$(function() {
$("#el").click(function(){ alert("click"); });
$("#el").mouseover(function(){ alert("mouseover"); });
$.each($._data($("#el")[0], "events"), function(i, event) {
output(i);
$.each(event, function(j, h) {
output("- " + h.handler);
});
});
});
function output(text) {
$("#output").html(function(i, h) {
return h + text + "<br />";
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="el">Test</div>
<code>
<span id="output"></span>
</code>Phi*_*ucK 36
对于jQuery 1.8+,这将不再有效,因为内部数据放在不同的对象中.
最新的非官方(但在以前的版本中也有效,至少在1.7.2中)现在这样做的方式是 -
$._data(element, "events")
下划线("_")就是这里的不同之处.在内部,它正在调用$.data(element, name, null, true),最后一个(第四个)参数是内部参数("pvt").
Rui*_*Rui 34
无耻的插件,但你可以使用findHandlerJS
要使用它,您只需要包含findHandlersJS(或者只是将原始javascript代码复制并粘贴到chrome的控制台窗口),并为您感兴趣的元素指定事件类型和jquery选择器.
对于您的示例,您可以快速找到您提到的事件处理程序
findEventHandlers("click", "#el")
findEventHandlers("mouseover", "#el")
这是返回的内容:
你可以在这里试试
我将@jps的两个解决方案合并到一个函数中:
jQuery.fn.getEvents = function() {
if (typeof(jQuery._data) == 'function') {
return jQuery._data(this.get(0), 'events') || {};
} else if (typeof(this.data) == 'function') { // jQuery version < 1.7.?
return this.data('events') || {};
}
return {};
};
但请注意,此函数只能返回使用jQuery本身设置的事件.
要检查元素上的事件：
var events = $._data(element, "events")
请注意，这仅适用于直接事件处理程序，如果您使用 $(document).on("event-name", "jq-selector", function() { //logic })，您将希望看到此答案底部的 getEvents 函数
例如：
var events = $._data(document.getElementById("myElemId"), "events")
或者
var events = $._data($("#myElemId")[0], "events")
完整示例：
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$("#textDiv").click(function() {
//Event Handling
});
var events = $._data(document.getElementById('textDiv'), "events");
var hasEvents = (events != null);
});
</script>
</head>
<body>
<div id="textDiv">Text</div>
</body>
</html>
一种更完整的检查方法，包括使用 $(document).on 安装的动态侦听器
function getEvents(element) {
var elemEvents = $._data(element, "events");
var allDocEvnts = $._data(document, "events");
for(var evntType in allDocEvnts) {
if(allDocEvnts.hasOwnProperty(evntType)) {
var evts = allDocEvnts[evntType];
for(var i = 0; i < evts.length; i++) {
if($(element).is(evts[i].selector)) {
if(elemEvents == null) {
elemEvents = {};
}
if(!elemEvents.hasOwnProperty(evntType)) {
elemEvents[evntType] = [];
}
elemEvents[evntType].push(evts[i]);
}
}
}
}
return elemEvents;
}
用法示例：
getEvents($('#myElemId')[0])
从1.9开始,除了使用Migrate插件恢复旧行为之外,没有记录的方法来检索事件.你可以使用_.data()方法作为jps提及,但这是一个内部方法.因此,如果您需要此功能,只需做正确的事情并使用Migrate插件.
从jQuery文档开始 .data("events")
在1.9之前,如果没有其他代码定义了名为"events"的数据元素,则可以使用.data("events")来检索jQuery的未记录的内部事件数据结构.这个特例已在1.9中删除.没有公共接口来检索此内部数据结构,并且它仍未记录.但是,jQuery Migrate插件会针对依赖于它的代码恢复此行为.
| 归档时间： |
|
| 查看次数： |
395862 次 |
| 最近记录： |