开发页面以测试事件在浏览器中的触发方式。我正在尝试创建一个脚本,将事件类型记录为目标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}}
答案 0 :(得分:2)
使用addEventListener
时,您必须从事件名称中删除on
前缀。
你可以这样做:
occurances[occurances.length] = i.substring(2);