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

Question

Developing page to test how events are fire in a browser. 开发页面以测试事件在浏览器中的触发方式。 I am trying to create a script that logs event types as the happen on a target div regardless of the event type. 我正在尝试创建一个脚本，将事件类型记录为目标div上发生的事件，而不管事件类型如何。 To do this I have written code that first finds all event types supported by the window. 为此，我编写了代码，首先查找窗口支持的所有事件类型。 This is based on code found here . 这基于此处的代码。

It then tries to attach all of these events to the target div. 然后它尝试将所有这些事件附加到目标div。 here named 'testbed' As console.log(i) counts all the way to zero I presume that the handles are all successfully added. 这里命名为'testbed'由于console.log（i）一直计为零，我假设句柄都已成功添加。 Therefore I assume that I have not worked out the best way to add function callback 因此我假设我没有找到添加函数回调的最佳方法

When I load this page in Google chrome I see a large red div. 当我在Google Chrome中加载此页面时，我看到一个大的红色div。 The console correctly displays first a list of events including 'onclick' The console the counts from 70 to 0 indicating 70 events added. 控制台首先正确显示事件列表，包括'onclick'控制台计数从70到0表示添加了70个事件。 It finally declares all events added. 它最终声明添加了所有事件。 When I click on the div nothing further is registered in the console. 当我点击div时，控制台中没有进一步注册。

So the question is, if the function logType is passed to setEventListeners which in turn hands it to the individual addEventListener and this is applied to every event type why does clicking on the div in question not cause any log to the console? 所以问题是，如果将函数logType传递给setEventListeners ，而setEventListeners又将它交给单个addEventListener并且这适用于每个事件类型，为什么单击有问题的div不会导致任何日志进入控制台？

complete code below 完整代码如下

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

Answer 1

When using addEventListener you must remove the on prefix from the event name. 使用addEventListener ，必须从事件名称中删除on前缀。

You can do this with: 你可以这样做：

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

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

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-11-11 12:45:07

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-11-11 12:45:07

解决方案1
2 已采纳 2013-11-11 12:45:07