我正在学习Javascript。仅当我的脚本标签位于输入文本元素下方时，下面的代码才起作用，但是如果我将代码置于输入文本标签上方，则它无法工作。我可以知道为什么吗？下面是代码：
<head>
</head>
<body>
<input type="text" id="name" >
<script type="text/javascript">
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e){
console.log('Pressed!')
})
</script>
</body>
下面的代码与上面的代码相同，只不过我使用的是函数，在其中我使用的代码与上面的代码相同。但是在这种情况下，我的脚本标签位于输入文本标签之上，并且它可以工作。在这种情况下如何运作？下面是代码：
<head>
<script type="text/javascript">
function keyPressListener(){
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e){
console.log('Pressed!')
})
}
</script>
</head>
<body>
<input type="text" id="name" onkeypress="keyPressListener()">
</body>
那么，以上2个代码之间到底有什么区别？
最佳答案
使用onkeypress属性时。实际上，它的作用与addEventListener相同。您只需要编写一个简单的函数并在onkeypress中调用它
<input type="text" id="name" onkeypress="keyPressed()">
<script>
function keyPressed(){
console.log('Key Pressed');
}
</script>