在javascript中为所有事件类型定义回调函数

时间:2013-11-11 12:25:08

标签: javascript events callback

开发页面以测试事件在浏览器中的触发方式。我正在尝试创建一个脚本,将事件类型记录为目标div上发生的事件,而不管事件类型如何。 为此,我编写了代码,首先查找窗口支持的所有事件类型。这是基于找到的代码here

然后尝试将所有这些事件附加到目标div。这里命名为'testbed' 由于console.log(i)一直计为零,我假设句柄都已成功添加。 因此我假设我没有找到添加函数回调的最佳方法

当我在Google Chrome中加载此页面时,我看到一个大的红色div。 控制台正确显示事件列表,包括'onclick' 控制台从70到0计数,表示添加了70个事件。 它最终声明添加了所有事件。 当我点击div时,控制台中没有任何进一步的注册。

所以问题是,如果函数logType传递给setEventListeners,而addEventListener又将其传递给个人<head> <meta charset="UTF-8"> <title>Document</title> <style> #testbed { width: 100%; height: 200px; background: red; } </style> </head> <body> <div id='testbed'> </div> <script> var myApp = { init: function () { this.getSupportedOccurances(window); var testbed = document.getElementById('testbed'); this.setEventListeners(testbed, this.occurances, this.logType); }, occurances: [], getSupportedOccurances: function (target) { var i = '', occurances = this.occurances; for (i in target) { if ( /^on/.test(i)) { occurances[occurances.length] = i; } } console.log(occurances); }, setEventListeners: function(target, eventList, callback) { var i = eventList.length-1; if (i > -1) { console.log('adding'); do { console.log(i); target.addEventListener(eventList[i], callback); } while (--i >=0); } console.log('Event Listeners added'); }, logType: function (event) { console.log(event.type); } } myApp.init(); </script> </body> 并且这适用于每个事件类型,为什么点击有问题的div不会导致任何日志到控制台?

以下完整代码

{{1}}

1 个答案:

答案 0 :(得分:2)

使用addEventListener时,您必须从事件名称中删除on前缀。

你可以这样做:

occurances[occurances.length] = i.substring(2);

请参阅http://jsfiddle.net/alnitak/3u6eQ/