在点击或当输入键被按下时触发事件[JavaScript]

Question

我写了这段代码，只有点击事件正在工作，但关键事件没有。任何人都可以向我解释为什么？

Btn_List.addEventListener("keypress", function(e) { 
 

 
\t var key = e.keyCode(); 
 

 
\t if (key === 13) { 
 

 
\t \t function OnKeyEnterPressDoThis() { 
 
\t \t \t Input_Tarea(); 
 
\t \t \t showTheNmbrOfListElmts(); 
 
\t \t \t orderAlphaFukkabossList(); 
 
\t \t } 
 

 
\t } 
 

 
}); 
 

 
// Agregar Tarea 
 
Btn_List.addEventListener("click", function() { 
 
\t Input_Tarea(); 
 
\t showTheNmbrOfListElmts(); 
 
\t orderAlphaFukkabossList(); 
 
});

Answer 1

你不是叫OnKeyEnterPressDoThis按键事件监听器里，你声明的功能。将函数移出事件侦听器，并在调用事件时调用它。

也使用e.keyCode而不是e.keyCode();因为keyCode它不是一个函数。

在某些浏览器中，e.keyCode未定义，您必须在这些情况下使用e.which。

所以这样的事情应该加一点的浏览器支持：

var key = e.which || e.keyCode || 0; 

代码：

function OnKeyEnterPressDoThis() { 
    Input_Tarea(); 
    showTheNmbrOfListElmts(); 
    orderAlphaFukkabossList(); 
} 

Btn_List.addEventListener("keypress", function(e) { 

    var key = e.which || e.keyCode || 0; 

    if (key === 13) { 
     OnKeyEnterPressDoThis(); 
    } 

}); 

// Agregar Tarea 
Btn_List.addEventListener("click", OnKeyEnterPressDoThis); 

Answer 2

尝试e.which

Btn_List.addEventListener("keypress" , function(e){ 
    var key = e.which; 
        alert(key) 
}); 
Btn_List.addEventListener("click" , function(e){ 
     alert('ff') 
    }); 

Answer 3

1. 你应该扫描为e.which，因为有些浏览器不遵守e.keyCode
2. 您应该使用e.preventDefault()，因为上的按钮进入触发点击事件（可访问性的原因）
3. 您应该避免使用keypress，转而使用​​或keyup为了避免重复的事件的事件（如在上面＃2提到的）

var Btn_List = document.querySelector('button'); 
 

 
Btn_List.addEventListener("keydown", function(e) { 
 

 
    var key = e.which && e.which || e.keyCode(); 
 

 
    if (key !== 9) 
 
    e.preventDefault(); // allow tab 
 

 
    if (key === 13) { 
 
    console.log('Enter pressed'); 
 
    (function OnKeyEnterPressDoThis() { 
 
     Input_Tarea(); 
 
     showTheNmbrOfListElmts(); 
 
     orderAlphaFukkabossList(); 
 
    }()); 
 
    } 
 

 
}); 
 

 
// Agregar Tarea 
 
Btn_List.addEventListener("click", function(e) { 
 
    console.log(e.type); 
 
    Input_Tarea(); 
 
    showTheNmbrOfListElmts(); 
 
    orderAlphaFukkabossList(); 
 
}); 
 

 
function Input_Tarea() { 
 
    console.log('Input_Tarea'); 
 
} 
 

 
function showTheNmbrOfListElmts() { 
 
    console.log('showTheNumbrOfListElmts'); 
 
} 
 

 
function orderAlphaFukkabossList() { 
 
    console.log('orderAlphaFukkabossList'); 
 
}

<button>Click</button> 
 
<button onClick="console.clear()">clear console</button>