keypress事件无法使用addEventListener函数

Question

我有一个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); ">

这很好

第二种方式我做错了什么吗？

Answer 1

得到了解决方案，。。当ret变量为false 时，需要防止defaultBehavior

eventObj["isNumeric"]=函数（事件）｛

 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();

}；

Answer 2

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