按键事件不适用于 addEventListener 函数答案

【问题标题】：keypress event not working with addEventListener Function按键事件不适用于 addEventListener 函数
【发布时间】：2015-03-17 11:13:21
【问题描述】：

我有一个 ID 为 mobileNumber 的输入字段，它只需要数字作为输入所以，我写了一个检查输入的函数（事件处理函数）。但是如果你通过addEventListener 函数添加该函数，它不会起作用，但是如果你通过onkeypress 属性添加它会起作用..

例如

<input type="text" class="insidetxt" placeholder="Mobile Number" name="mobile number" id="mobileNumber">

 //input field;

 var isNumeric =function (event){
     var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        var keyCode = event.which ? event.which : event.keyCode
        var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);  
        return ret;
  }; 

  //this function check whether the input character is digit or not


 eventObj["isNumeric"] = function (event){
     var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        var keyCode = event.which ? event.which : event.keyCode
        var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);  
        return ret;
  }; 

//event obj contains the function to check, same functionality 

(function(eventObj){
  var mobileInput =  document.getElementById("mobileNumber");
  mobileInput.addEventListener("keypress", eventObj["isNumeric"], false);
})(eventObj);

如果我像这样添加事件侦听器，则会调用该函数，但也不会限制用户输入字符；

但如果我这样做：

<input type="text" class="insidetxt" placeholder="Mobile Number" name="mobile number" id="mobileNumber" onkeypress="return isNumeric(event); ">

这很好用

我在第二种方式中做错了吗？

【问题讨论】：

你能在小提琴中更新你的代码吗？
您究竟在哪里使用按键处理程序的返回值？
jsfiddle.net/dbxLfona

标签： javascript event-handling dom-events keypress

【解决方案1】：

是的，第二种方法不是最佳实践。 Html 属性可以更改或绕过，所以最好添加事件监听器。

【讨论】：

【解决方案2】：

解决了，..需要防止ret变量为false时的defaultBehaviour

eventObj["isNumeric"] = function(event) {

 var specialKeys = new Array();
    specialKeys.push(8); //Backspace
    var keyCode = event.which ? event.which : event.keyCode
    var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);  
    if(!ret)
        event.preventDefault();

};

【讨论】：