如何将两个不同箭头键的代码与两个不同的变量结合起来？答案

【问题标题】：how do I combine code for two different arrow key's with two different vars?如何将两个不同箭头键的代码与两个不同的变量结合起来？
【发布时间】：2014-06-30 17:28:03
【问题描述】：

我有一些触发向下箭头键的代码。但我想要相同的代码，但使用另一个 var，并且箭头键处于向下箭头键的状态。我在这段代码中有 2 个 div，它是一个用 css 绘制的条形图。当您按住箭头键时，您会看到该值正在发生变化。我想要相同的，但有另外两个 div 的 en 向左箭头键。您如何添加该代码，并且两者都有效。

var changeIdValue = function () {
 var current = document.getElementById('balklongwaarde').clientHeight - 15 + 'px';
'use strict'
document.getElementById('balklongwaarde').style.height = current;
var current = document.getElementById('balklevensverwachting').clientHeight - 7.5 + 'px';
'use strict'
document.getElementById('balklevensverwachting').style.height = current;
};

var intervalID;

 //through arrow down values are changing//
window.onkeydown = function(e){
if(e.keyCode == 40){
    if(typeof intervalID == 'undefined') {
        intervalID = window.setInterval(changeIdValue, 10);       
    }
};



//through arrow down values are changing//
 window.onkeyup = function(e){
if(e.keyCode == 40){
    window.clearInterval(intervalID);
    intervalID= undefined;

 }
};
}

http://jsfiddle.net/MhTU9/ 在 jsfiddle 我已经添加了左箭头键的代码，但它不起作用

【问题讨论】：

标签： javascript css onkeydown onkeyup

【解决方案1】：

您需要使用addEventListener 绑定多个回调。 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

Demo.

代码 DRY 版本。

function bind(callback, keyCode) {
    var interval;
    window.addEventListener('keydown', function(e){
        if(e.keyCode === keyCode) {
            if(typeof interval === 'undefined') {
                interval = setInterval(callback, 10);
            }
        }
    }, false);
    window.addEventListener('keyup', function(e){
        if(e.keyCode === keyCode) {
            interval = clearInterval(interval);
        }
    }, false)
}

bind(changeIdValue, 37);
bind(changeWaarde, 40);

【讨论】：