JQueryを使用しないクラスにkeypressイベントを追加します

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

• を使用することができますHTML DOM click() Method
• HTML DOM getElementsByClassName()Method
• HTML DOM addEventListener() Method