0

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

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

当我在谷歌浏览器中加载这个页面时，我看到一个大的红色 div。控制台首先正确显示事件列表，包括“onclick”控制台从 70 到 0 的计数表示添加了 70 个事件。它最终声明添加的所有事件。当我单击 div 时，控制台中没有进一步注册。

所以问题是，如果函数logType被传递给setEventListeners哪个函数又将它传递给个人addEventListener，并且这应用于每个事件类型，为什么单击有问题的 div 不会导致任何日志到控制台？

完整代码如下

<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>
4

1 回答 1

2

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

你可以这样做：

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

见http://jsfiddle.net/alnitak/3u6eQ/

于 2013-11-11T12:45:07.770 回答