向没有 JQuery 的类添加按键事件

Question

下面的代码附加了点击事件处理程序，但不适用于键盘事件。我不仅想要document.keypress，还想要键盘事件的特定类元素。所以我写了“测试”，它适用于鼠标点击，但不适用于任何键盘事件。

  function test(className, fnCall, eventToApply){
    if(typeof document.getElementById('x').getElementsByClassName(className) !='undefined') {
                    var els = document.getElementById('x').getElementsByClassName(className);
                    for(var i = 0; i < els.length; i++) {
                        if(els[i].addEventListener) { //Undefined for keypress events
                          els[i].addEventListener(eventName,  function(e) { fnCall(e); }); }
                        else {  //Hardcode for testing
                           els[i].onclick = function(e) { fnCall(e); };     
                            els[i].onkeypress = function(e) { fnCall(e); } //doesn't work!
                        }
                    }

虽然文档 onkeypress 有效，但我无法在文档就绪或按键本身上设置单个元素处理程序。

document.addEventListener('keypress', function(event){
                   //This works, but setting up events for each class type element doesn't work for keypress 
        })

换句话说，在不使用 JQuery 的情况下，是否有等效的方法：

 document.addEventListener('keypress', function(event){
       //This works in Jquery
        $('.customClass-'+ event.keycode).click(); 
  });



document.addEventListener('keypress', function(event){
 //This doesn't register, says undefined for any event or attachEvenHandler/attachEvent    
 test('.class'+event.keycode, myFunction() , 'keypress');

 });

Answer 1

你可以用这个

document.addEventListener('keypress', function(event){
    var elements = document.getElementsByClassName("customClass-" + event.keycode);
    for (var i = 0; i < elements.length; i++) {
        elements[i].click();
    }
});

w3school 文档

• HTML DOM click() Method
• HTML DOM getElementsByClassName()Method
• HTML DOM addEventListener() Method