存储对象事件的位置[重复]答案

【问题标题】：In which object events are stored [duplicate]存储对象事件的位置[重复]
【发布时间】：2015-03-07 13:42:56
【问题描述】：

我有一个div 附加了两个功能，一个是点击功能，另一个是悬停功能。在 javascript 中有什么方法可以找到与该元素相关的事件。如果我们将函数附加到某个元素，那么它将存储在 dom 中。可以用开发者工具找到吗

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

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

脚本

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

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

【问题讨论】：

我们可以使用开发者工具找到它吗 可以。
您使用的是 firefox 还是 chrome 开发工具？
存储对象事件的地方

标签： javascript

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

sn-p 显示两者。 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>

【讨论】：