Question

我有div附加了两个功能，一个是点击，另一个是悬停功能。在javascript中有任何方法可以找到与该元素相关的事件。如果我们将函数附加到某个元素然后它存储在dom中。我们可以通过使用开发人员工具

找到它

编辑：浏览器/ DOM如何知道哪个事件向哪个元素注册

<div id="test">test</div>

脚本

document.getElementById('test').addEventListener('click',function(){},false)

document.getElementById('test').addEventListener('hover',function(){},false)

Answer 1

事件发生时，事件属性和方法会自动发送给处理程序。因此，您可以将事件用作处理程序的参数。事件的type属性会通知您事件类型。

document.getElementById('test')
 .addEventListener('click', function(evt){ /* evt is the event object */},false);

要确定某个元素是否可以使用该事件，请查询该属性（例如onmouseover）。如果它返回undefined，则该元素上不存在该事件。

该片段显示了两者。 type以红色打印。

document.querySelector('#test').addEventListener('click', testfn);
var res = document.querySelector('#result');
var canhover = document.querySelector('#test')['onhover'];
var canclick = document.querySelector('#test')['onclick'];
var canmousover = document.querySelector('#test')['onmouseover']

res.innerHTML = 'can hover be used with #test? '+ 
                 (canhover === undefined ? 'no' : 'yes');
res.innerHTML += '<br>can click be used with #test? '+ 
                 (canclick === undefined ? 'no' : 'yes');
res.innerHTML += '<br>can mouseover be used with #test? '+ 
                 (canmousover === undefined ? 'no' : 'yes');


function testfn(evt) {
  // browser compat
  evt = evt || window.evt;
  res.innerHTML = 'Event props (event was: <i>' + evt.type + '</i>)<hr>';
  for (var l in evt) {
    if (/type/i.test(l)) {
        res.innerHTML += '<b style="color:red">' + l +': '+evt[l]+'</b><br>';
    } else {
      res.innerHTML += l +': '+evt[l]+'<br>';
    }
  }
}

#test {
  cursor:pointer;
  color: green;
  margin-bottom: 1.5em;
}

<div id="test">click me</div>
<div id="result"></div>

Answer 2

您可以使用jQuery Eventfilter并测试结果：

http://www.codenothing.com/archives/jquery/event-filter/

我也在GitHub上找到了这个jQuery插件：https://github.com/sebastien-p/jquery.hasEventListener

存储哪些对象事件

2 个答案: