Question

我需要在总共9个dom元素中添加一堆事件监听器。我编写了以下脚本，它对元素id进行了迭代，并添加了相应的操作。

没有itteration，函数就会按照它们的意图执行。

var mydom = document.getElementById('arrow_up');
mydom.addEventListener('touchstart', function(){forward = setInterval(action, 500, 'forward')});
mydom.addEventListener('touchend', function(){clearInterval(forward)});
mydom.addEventListener('click', function(){action('forward')});

控制台：行动=转发

使用以下脚本，似乎一切都按预期工作。但是，当调用回调函数时，它不传递任何参数（参数未定义）

控制台：行动=未定义

这是完整的脚本：

window.addEventListener('load', initialize_page);

var forward_left
var forward
var forward_right
var rotate_left
var stop
var rotate_right
var backward_left
var backward
var backward_right

function initialize_page(){
    console.log('initializing page');
    var dom_ids = ['arrow_left_up', 'arrow_up', 'arrow_right_up',
                   'arrow_left_rotate', 'stop', 'arrow_right_rotate',
                   'arrow_left_down', 'arrow_down', 'arrow_right_down'];
    var action_ids = ['forward_left', 'forward', 'forward_right',
                      'rotate_left', 'stop', 'rotate_right',
                      'backward_left', 'backward', 'backward_right'];
    var intervalIDs = [forward_left, forward, forward_right,
                       rotate_left, stop, rotate_right,
                       backward_left, backward, backward_right];

    for (i = 0; i < 9; i++) {
        console.log(i + ' initiating DOM ' + dom_ids[i] + ' with action ' + action_ids[i]);
        console.log(dom_ids[i], action_ids[i])
        var mydom = document.getElementById(dom_ids[i]);
        mydom.addEventListener('touchstart', function(){intervalIDs[i] = setInterval(action, 500, action_ids[i])});
        mydom.addEventListener('touchend', function(){clearInterval(intervalIDs[i])});
        mydom.addEventListener('click', function(){action(action_ids[i])});
    };
    console.log('initialization complete');
};

function action(actionStr){
    var theUrl = "action="+actionStr;
    var xmlHttp = new XMLHttpRequest();
    console.log(theUrl);
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            {};
    };
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
};

在for循环中启动时，addEventListener不会将参数传递给回调函数

0 个答案: