ブラウザーでイベントがどのように発生するかをテストするためのページを開発しています。イベントの種類に関係なく、ターゲット div で発生したイベントの種類をログに記録するスクリプトを作成しようとしています。これを行うために、ウィンドウでサポートされているすべてのイベント タイプを最初に検出するコードを作成しました。これは、ここにあるコードに基づいています。
次に、これらすべてのイベントをターゲット div にアタッチしようとします。ここでは「testbed」という名前です console.log(i) がゼロまでカウントされるので、ハンドルがすべて正常に追加されたと思います。したがって、関数コールバックを追加する最良の方法を考え出していないと思います
このページを Google chrome で読み込むと、大きな赤い 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>