这是我的问题：是否有可能以某种方式检查是否存在动态附加的事件监听器？或者我如何检查DOM中“onclick”（？）属性的状态？我已经像StackOverflow一样搜索了互联网，但是没有运气。这是我的HTML：
<a id="link1" onclick="linkclick(event)"> link 1 </a>
<a id="link2"> link 2 </a> <!-- without inline onclick handler -->
然后在javascript中我将动态创建的事件监听器附加到第二个链接：
document.getElementById('link2').addEventListener('click', linkclick, false);
代码运行良好，但我检测连接侦听器的所有尝试都失败了：
// test for #link2 - dynamically created eventlistener
alert(elem.onclick); // null
alert(elem.hasAttribute('onclick')); // false
alert(elem.click); // function click(){[native code]} // btw, what's this?
jsFiddle is here。 如果单击“添加onclick for 2”然后单击“[link 2]”，事件将会激活， 但“测试链接2”总是报告错误。 有人可以帮忙吗？
答案 0 :(得分：31)
无法检查是否存在动态附加的事件侦听器。
您可以看到附加事件侦听器的唯一方法是附加事件侦听器，如下所示：
elem.onclick = function () { console.log (1) }
然后，您可以通过返回onclick（或类似内容）来测试事件监听器是否附加到!!elem.onclick。
答案 1 :(得分：17)
我要做的是在函数外部创建一个布尔值为FALSE的布尔值，并在附加事件时设置为TRUE。在您再次附加事件之前，这将作为某种标志。以下是这个想法的一个例子。
// initial load
var attached = false;
// this will only execute code once
doSomething = function() {
if (!attached) {
attached = true;
//code
}
}
//attach your function with change event
window.onload = function() {
var txtbox = document.getElementById("textboxID");
if(window.addEventListener){
txtbox.addEventListener("change", doSomething, false);
} else if(window.attachEvent){
txtbox.attachEvent("onchange", doSomething);
}
}
答案 2 :(得分：13)
我做了类似的事情：
const element = document.getElementById('div');
if (element.getAttribute('listener') !== 'true') {
element.addEventListener('click', function (e) {
const elementClicked = e.target;
elementClicked.setAttribute('listener', 'true');
console.log('event has been attached');
});
}
在附加侦听器时为元素创建特殊属性，然后检查它是否存在。
答案 3 :(得分：6)
tl; dr ：不，你不能以任何原生支持的方式做到这一点。
我知道实现此目的的唯一方法是创建一个自定义存储对象，您可以在其中保留已添加的侦听器的记录。以下内容：
/* Create a storage object. */
var CustomEventStorage = [];
步骤1：首先，您将需要一个可以遍历存储对象并返回给定元素（或false）的元素记录的函数。
/* The function that finds a record in the storage by a given element. */
function findRecordByElement (element) {
/* Iterate over every entry in the storage object. */
for (var index = 0, length = CustomEventStorage.length; index < length; index++) {
/* Cache the record. */
var record = CustomEventStorage[index];
/* Check whether the given element exists. */
if (element == record.element) {
/* Return the record. */
return record;
}
}
/* Return false by default. */
return false;
}
第2步：然后，您将需要一个可以添加事件侦听器但又将侦听器插入存储对象的函数。
/* The function that adds an event listener, while storing it in the storage object. */
function insertListener (element, event, listener, options) {
/* Use the element given to retrieve the record. */
var record = findRecordByElement(element);
/* Check whether any record was found. */
if (record) {
/* Normalise the event of the listeners object, in case it doesn't exist. */
record.listeners[event] = record.listeners[event] || [];
}
else {
/* Create an object to insert into the storage object. */
record = {
element: element,
listeners: {}
};
/* Create an array for event in the record. */
record.listeners[event] = [];
/* Insert the record in the storage. */
CustomEventStorage.push(record);
}
/* Insert the listener to the event array. */
record.listeners[event].push(listener);
/* Add the event listener to the element. */
element.addEventListener(event, listener, options);
}
第3步：关于问题的实际要求，您需要使用以下函数来检查是否已为指定事件添加了元素的事件侦听器。
/* The function that checks whether an event listener is set for a given event. */
function listenerExists (element, event, listener) {
/* Use the element given to retrieve the record. */
var record = findRecordByElement(element);
/* Check whether a record was found & if an event array exists for the given event. */
if (record && event in record.listeners) {
/* Return whether the given listener exists. */
return !!~record.listeners[event].indexOf(listener);
}
/* Return false by default. */
return false;
}
第4步：最后，您需要一个可以从存储对象中删除侦听器的函数。
/* The function that removes a listener from a given element & its storage record. */
function removeListener (element, event, listener, options) {
/* Use the element given to retrieve the record. */
var record = findRecordByElement(element);
/* Check whether any record was found and, if found, whether the event exists. */
if (record && event in record.listeners) {
/* Cache the index of the listener inside the event array. */
var index = record.listeners[event].indexOf(listener);
/* Check whether listener is not -1. */
if (~index) {
/* Delete the listener from the event array. */
record.listeners[event].splice(index, 1);
}
/* Check whether the event array is empty or not. */
if (!record.listeners[event].length) {
/* Delete the event array. */
delete record.listeners[event];
}
}
/* Add the event listener to the element. */
element.removeEventListener(event, listener, options);
}
<强>段：
window.onload = function () {
var
/* Cache the test element. */
element = document.getElementById("test"),
/* Create an event listener. */
listener = function (e) {
console.log(e.type + "triggered!");
};
/* Insert the listener to the element. */
insertListener(element, "mouseover", listener);
/* Log whether the listener exists. */
console.log(listenerExists(element, "mouseover", listener));
/* Remove the listener from the element. */
removeListener(element, "mouseover", listener);
/* Log whether the listener exists. */
console.log(listenerExists(element, "mouseover", listener));
};<!-- Include the Custom Event Storage file -->
<script src = "https://cdn.rawgit.com/angelpolitis/custom-event-storage/master/main.js"></script>
<!-- A Test HTML element -->
<div id = "test" style = "background:#000; height:50px; width: 50px"></div>
虽然自OP发布问题已经过去了5年多，但我相信将来偶然发现它的人会从这个答案中受益，所以请随意提出建议或改进。
答案 4 :(得分：5)
例如，您可以随时使用Chrome检查器手动检查EventListener是否存在。 在“元素”选项卡中，您可以使用传统的＆＃34;样式＆＃34; subtab并接近另一个：＆＃34;事件监听器＆＃34;。 这将为您提供所有EventListener及其链接元素的列表。
答案 5 :(得分：3)
这是我用来检查是否存在动态附加事件监听器的脚本。我使用jQuery将事件处理程序附加到元素，然后触发该事件（在这种情况下是＆＃39; click＆＃39;事件）。这样我就可以检索和捕获仅在附加事件处理程序时才存在的事件属性。
var eventHandlerType;
$('#contentDiv').on('click', clickEventHandler).triggerHandler('click');
function clickEventHandler(e) {
eventHandlerType = e.type;
}
if (eventHandlerType === 'click') {
console.log('EventHandler "click" has been applied');
}
答案 6 :(得分：3)
可能的重复项：Check if an element has event listener on it. no jquery。 请在那找到我的答案。
基本上，这是Chromium（Chrome）浏览器的窍门：
getEventListeners(document.querySelector('your-element-selector'));
答案 7 :(得分：1)
我编写了一个 Chrome 扩展程序，需要确定页面上的哪些元素响应了点击。我是这样做的：
(1) 在 manifest.json 中，将“run_at”属性设置为“document_start”。 （我们需要在页面开始运行之前注入一个脚本。）
(2) 在您的内容脚本中，添加一些代码以将脚本注入页面，该脚本将覆盖 EventTarget.prototype.addEventListener 以标记所有动态分配点击侦听器的元素：
let flagClickHandledElements = function() {
let oldEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(event_name, handler_func) {
if (event_name === 'click') {
if (this.setAttribute) {
this.setAttribute('data-has_click_handler', true);
}
}
if (oldEventListener)
oldEventListener(event_name, handler_func);
}
}
function injectScript(func) {
let codeString = '(' + func + ')();';
let script = document.createElement('script');
script.textContent = codeString;
(document.head||document.documentElement).appendChild(script);
}
injectScript(flagClickHandledElements);
(3) 将“webNavigation”添加到 manifest.json 中的“权限”列表
(4) 在后台脚本中添加一些代码，以在页面加载完成时通知内容脚本：
function onPageDoneLoading(details)
{
chrome.tabs.sendMessage(details.tabId, {"action": "doneloading"});
}
chrome.webNavigation.onCompleted.addListener(onPageDoneLoading);
(5) 当页面完成加载时，让您的内容脚本将另一个脚本注入页面，该脚本会扫描页面上的所有元素以查找旧式“onclick”处理程序：
let gatherOldStyleClickHandledElements = function() {
let all_elements = document.getElementsByTagName("*");
for (let i = 0; i < all_elements.length; i++) {
let el = all_elements[i];
if (el.setAttribute && el.onclick) {
el.setAttribute('data-has_click_handler', true);
}
}
}
function onReceiveMessage(request) {
if (request.action === 'doneloading') {
injectScript(gatherOldStyleClickHandledElements);
} else {
console.log('Unrecognized message');
}
return Promise.resolve("Dummy response to keep the console quiet");
}
(6) 最后，你可以在你的内容脚本中测试一个元素，看看它是否有这样的点击处理程序：
if (el.getAttribute('data-has_click_handler'))
console.log('yep, this element has a click handler');
答案 8 :(得分：0)
var listenerPaste = pasteAreaElm.hasOwnProperty('listenerPaste');
if (!listenerPaste) {
pasteAreaElm.addEventListener("paste", onPasteEvent, false);
pasteAreaElm.listenerPaste = true;
}
答案 9 :(得分：0)
这样的事情应该有助于文档：
var listeners = window.getEventListeners(document);
Object.keys(listeners).forEach(event => {
console.log(event, listeners[event]);
});
或者使用选择器：
getAllEventListeners = function(el) {
var allListeners = {}, listeners;
while(el) {
listeners = getEventListeners(el);
for(event in listeners) {
allListeners[event] = allListeners[event] || [];
allListeners[event].push({listener: listeners[event], element: el});
}
el = el.parentNode;
}
return allListeners;
}
答案 10 :(得分：0)
这种方法不存在似乎很奇怪。现在是时候添加它了吗？
如果您愿意，可以进行以下操作（未测试）：
var _addEventListener = EventTarget.prototype.addEventListener;
var _removeEventListener = EventTarget.prototype.removeEventListener;
EventTarget.prototype.events = {};
EventTarget.prototype.addEventListener = function(name, function, etc) {
var events = EventTarget.prototype.events;
if (events[name]==null) {
events[name] = [];
}
if (events[name].indexOf(function)==-1) {
events[name].push(function);
}
_addEventListener(name, function);
}
EventTarget.prototype.removeEventListener = function(name) {
var events = EventTarget.prototype.events;
if (events[name]!=null && events[name].indexOf(function)!=-1) {
events[name].splice(events[name].indexOf(function), 1);
}
_removeEventListener(name, function);
}
EventTarget.prototype.hasEventListener = function(name) {
var events = EventTarget.prototype.events;
if (events[name]==null) {
return false;
}
return events[name].length);
}
答案 11 :(得分：0)
只需在添加事件之前将其删除：
document.getElementById('link2').removeEventListener('click', linkclick, false);
document.getElementById('link2').addEventListener('click', linkclick, false);
答案 12 :(得分：0)
如果我理解得很好，您只能检查是否已检查了一个侦听器，而不能检查特定是哪个侦听器的演示者。
因此，一些临时代码将填补空白以处理您的编码流程。一种实用的方法是使用变量创建var listenerPresent=false
。例如，将侦听器的检查器附加如下：
listenerPresent=true
然后，如果您设置了侦听器，则只需更改值：
accessFirstFunctionality=false
accessSecondFunctionality=true
accessThirdFunctionality=true
然后在eventListener的回调中，您可以在内部分配特定功能，并以相同的方式，根据某些状态将对功能的访问分配为变量，例如：
df.RefactoringDetail.str.extract(r'class ([^ ]*)')
答案 13 :(得分：0)
似乎没有跨浏览器功能来搜索在给定元素下注册的事件。
但是，可以在某些浏览器中使用其开发工具来查看元素的回调函数。在尝试确定网页的功能或调试代码时，这很有用。
Firefox
首先，在开发人员工具的 Inspector 标签中查看元素。可以这样做：
如果在元素上注册了任何事件，您将在元素旁边看到一个包含单词 Event 的按钮。单击它将允许您查看已向元素注册的事件。单击事件旁边的箭头，可以查看该事件的回调函数。
Chrome
首先，在开发人员工具的 Elements 标签中查看元素。可以这样做：
在显示包含网页元素的树的窗口部分附近，应该有另一部分带有标题为“事件监听器”的选项卡。选择它可以查看已注册到元素的事件。要查看给定事件的代码，请单击事件右侧的链接。
在Chrome中，还可以使用 getEventListeners 函数找到元素的事件。但是，根据我的测试，当将多个元素传递给它时， getEventListeners 函数不会列出事件。如果要在页面上找到所有具有侦听器的元素并查看这些侦听器的回调函数，则可以在控制台中使用以下代码执行此操作：
var elems = document.querySelectorAll('*');
for (var i=0; i <= elems.length; i++) {
var listeners = getEventListeners(elems[i]);
if (Object.keys(listeners).length < 1) {
continue;
}
console.log(elems[i]);
for (var j in listeners) {
console.log('Event: '+j);
for (var k=0; k < listeners[j].length; k++) {
console.log(listeners[j][k].listener);
}
}
}
如果您知道在给定的浏览器或其他浏览器中执行此操作的方法，请编辑此答案。
答案 14 :(得分：0)
我刚写了一个脚本，可以让你实现这个目标。它为您提供了两个全局函数：hasEvent(Node elm, String event)和getEvents(Node elm)，您可以使用它们。请注意，它会修改EventTarget原型方法add/RemoveEventListener，但不适用于通过HTML标记或elm.on_event = ...
<强> Live Demo
<强>脚本：
var hasEvent,getEvents;!function(){function b(a,b,c){c?a.dataset.events+=","+b:a.dataset.events=a.dataset.events.replace(new RegExp(b),"")}function c(a,c){var d=EventTarget.prototype[a+"EventListener"];return function(a,e,f,g,h){this.dataset.events||(this.dataset.events="");var i=hasEvent(this,a);return c&&i||!c&&!i?(h&&h(),!1):(d.call(this,a,e,f),b(this,a,c),g&&g(),!0)}}hasEvent=function(a,b){var c=a.dataset.events;return c?new RegExp(b).test(c):!1},getEvents=function(a){return a.dataset.events.replace(/(^,+)|(,+$)/g,"").split(",").filter(function(a){return""!==a})},EventTarget.prototype.addEventListener=c("add",!0),EventTarget.prototype.removeEventListener=c("remove",!1)}();
答案 15 :(得分：-1)
理论上你可以搭载addEventListener和removeEventListener来添加删除'this'对象的标志。丑陋，我没有测试......
答案 16 :(得分：-1)
我刚刚通过试图查看我的活动是否附加而找到了这个......
如果你这样做：
item.onclick
它将返回“null”
但如果你这样做：
item.hasOwnProperty('onclick')
然后是“TRUE”
所以我认为当你使用“addEventListener”添加事件处理程序时，访问它的唯一方法是通过“hasOwnProperty”。我希望我知道为什么或如何，但经过研究后，我还没有找到解释。