这是我的问题:是否可以以某种方式检查是否存在一个动态附加的事件侦听器?或者我怎么能在DOM中检查“onclick”(?)属性的状态?我已经在互联网上搜索了一个解决方案,就像Stack Overflow,但没有运气。这是我的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在这里。
如果你点击“Add onclick for 2”,然后点击“[link 2]”,事件会正常启动,
但是“测试链接2”总是报告错误。
有人能帮帮我吗?
我写了3个函数来做这个:
var addEvent = function(object, type, callback)
{
if (object != null && typeof(object) != 'undefined' && object.addEventListener)
{
object.isAttached = typeof object.isAttached == "undefined" ? [] : object.isAttached;
if (!object.isAttached[type])
{
object.isAttached[type] = true;
object.addEventListener(type, callback, false);
}
}
};
var removeEvent = function(object, type, callback)
{
if (object != null && typeof(object) != "undefined" && typeof object.isAttached != "undefined" && object.isAttached[type])
{
object.removeEventListener(type, callback, false);
object.isAttached[type] = false;
}
};
var hasEvent = function(object, type, callback)
{
return object != null && typeof(object) != "undefined" && typeof object.isAttached != "undefined" && object.isAttached[type];
};
函数的使用很简单:
function mousemove(e)
{
console.log("x:" + e.clientX + ", y:" + e.clientY);
}
if (hasEvent(window, "mousemove", mousemove))
console.log('window has "mousemove" event with "mousemove" callback');
else
console.log('window does not have "mousemove" event with "mousemove" callback');
addEvent(window, "mousemove", mousemove);
if (hasEvent(window, "mousemove", mousemove))
console.log('window has "mousemove" event with "mousemove" callback');
else
console.log('window does not have "mousemove" event with "mousemove" callback');
/*
Output
window does not have "mousemove" event with "mousemove"
window has "mousemove" event with "mousemove" callback
The x and y coordinates of mouse as you move it
*/
我写了一个Chrome扩展,需要确定页面上的哪些元素响应点击。我是这样做的:
(1)舱单。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中的“permissions”列表中
(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');