我正在学习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个代码之间到底有什么区别？
3条答案
按热度按时间k97glaaz1#
当你使用
onkeypress属性时，它的工作方式和addEventListener一样，你只需要写一个简单的函数，然后在onkeypress中调用它8gsdolmq2#
为什么无法放置在输入上方-因为文档未准备好。所以您需要
body.onload事件。请参见正文onload=start()，它将在正文加载后应用js函数和第二个-您在单个事件中使用两个函数。因此，与任何一个事件一起使用
keyPressListener()的内联按键一起使用 else 使用按键的Dom事件 *(addEventListener)**注：
1.不要将
addEventListener()包含在keyPressListener()中。1.如果将与
addEventListener()一起使用，请移除标记的内联onkeypress事件。1.因为两者是相同的动作。
eiee3dmh3#
您可以使用
addEventListener。或者尝试以下输入：
在keyPressListener（）后添加一个
;：<input type="text" id="name" onkeypress="keyPressListener();">如果这不起作用，试试这个：
<input type="text" id="name" onkeypress="keyPressListener(); return true;">HTML5知道，当你使用
onkeypress属性时，它需要调用JavaScript函数when the key is pressed，你基本上可以在onkeypress="（JavaScript在这里）"属性的参数中放入任何函数JavaScript。您还可以从DOM中获取元素，然后将事件侦听器添加到元素中，如下所示：
jQuery：
$('#name').onkeypress( function() { //code goes here } );常规J：
document.getElementById('name').onkeypress( function() { //code goes here } );