如何使用"addEventListener"("keyup"，函数)而不是使用"onkeyup"作为HTML属性获得相同的结果？

Question

我找到了这个原始代码。我关心的是正则表达式的验证问题。由于以下功能，您无法键入数字：

<form>
<label for="username">Chosse a Username:</label>
<input type="text" name="username" id="username1" onkeyup="lettersOnly(this)">
</form>
<script>
function lettersOnly(input){
            var regex = /[^a-z]/gi;
            input.value = input.value.replace(regex, "");
}
</script>

根据我的阅读，像onkeyup这样的事件不应该像HTML中的属性一样放置，所以在更长的时间后，我发现了另一个没有onkeyup属性的解决方案，如下所示：

<form>
<label for="username">Choose a Username:</label>
<input type="text" name="username" id="texto1">
</form>
<script>
let user = document.getElementById('texto1');
            user.onkeyup = function() {
            var regex = /[^a-z]/gi;
            user.value = user.value.replace(regex, "");
           }
</script>

然而，如果像ONkeyup这样的ON前缀事件仍然是好的标准，我真的找不到准确的信息。有没有一种方法可以得到你在这两个例子中得到的相同效果，但使用addEventListener？我尝试了下面的代码，有很多变体，但什么都没有。你能给我什么建议吗？

<form>
<label for="username">Chosse a Username:</label>
<input type="text" name="username" id="username2">
</form>
<script>
function lettersOnly(input){
            var regex = /[^a-z]/gi;
            input.value = input.value.replace(regex, "");
        }
            input.value.addEventListener('keyup', lettersOnly);
</script>

上一个例子中我做错了什么？

Answer 1

function get_ml(){
    alert('in');    
}
var el = document.getElementById('ta_in'); 
if (typeof el.addEventListener != "undefined") {
    el.addEventListener("keyup", function(evt) {
        get_ml();
    }, false);
} else if (typeof el.attachEvent != "undefined") { //incase you support IE8
    el.attachEvent("onkeyup", function(evt) {
        get_ml();
    });
}

<textarea id="ta_in" rows="7" cols="42" onkeyup="get_ml()"></textarea>