在點擊或當輸入鍵被按下時觸發事件[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>