这是我的问题:是否可以以某种方式检查是否存在一个动态附加的事件侦听器?或者我怎么能在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”总是报告错误。
有人能帮帮我吗?
我只是写了一个脚本来让你实现这个。它为您提供了两个全局函数:hasEvent(Node elm, String事件)和getEvents(Node elm),您可以利用它们。注意,它修改了EventTarget原型方法add/RemoveEventListener,并且不适用于通过HTML标记或elm的javascript语法添加的事件。On_event =…
更多信息在GitHub
现场演示
脚本:
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)}();
如果我理解得很好,你只能检查是否检查了一个听众,而不能检查哪个听众是具体的演示者。
因此,一些特别的代码将填补空白,以处理您的编码流。一种实用的方法是使用变量创建状态。例如,像下面这样附加一个监听器的检查器:
var listenerPresent=false
然后如果你设置了一个监听器,只需要改变这个值:
listenerPresent=true
然后在你的eventListener的回调中,你可以在里面分配特定的函数,以同样的方式,根据某些状态作为变量来分配对函数的访问:
accessFirstFunctionality=false
accessSecondFunctionality=true
accessThirdFunctionality=true