这是我的问题:是否可以以某种方式检查是否存在一个动态附加的事件侦听器?或者我怎么能在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
*/
我写了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
*/
你好,我在这里提出我的方法,它以某种方式工作,以避免在DOM的同一元素上进行多个侦听。我的方法使用JQUERY,但原理如下:
在对应用程序进行特定处理(必须在DOM元素(如click)上重新生成侦听器)之后,我们首先删除该事件以避免多次出现该事件,然后立即重新创建它。
这一原则要根据需要加以调整。这只是原理。我向你展示如何在jquery。
line 1 : $(_ELTDOM_).unbind('click');
line 2 : $(_ELTDOM_).bind('click',myFct);
我希望通过调整这个解决方案可以帮助到一些人。我坚持认为,这种解决方案不一定适用于所有情况,但它已经使解决与双、三重……相关的问题成为可能。例如,由于同一元素上的多个侦听而导致的同时处理
如果我理解得很好,你只能检查是否检查了一个听众,而不能检查哪个听众是具体的演示者。
因此,一些特别的代码将填补空白,以处理您的编码流。一种实用的方法是使用变量创建状态。例如,像下面这样附加一个监听器的检查器:
var listenerPresent=false
然后如果你设置了一个监听器,只需要改变这个值:
listenerPresent=true
然后在你的eventListener的回调中,你可以在里面分配特定的函数,以同样的方式,根据某些状态作为变量来分配对函数的访问:
accessFirstFunctionality=false
accessSecondFunctionality=true
accessThirdFunctionality=true