为什么这种事件处理程序的设置不起作用？

Question

这是我的 html 文件/tmp/test/test.html

<!DOCTYPE html>
<html>

  <head>
    <script src="../js/my.js" defer>
    </script>
  </head>

  <body>

    <p>This example uses the HTML DOM to assign an "onchange" event to an input element.</p>   

    Enter your name: <input type="text" id="fname">
    <p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>


  </body>
  </html>

这是我的 javascript 文件/tmp/js/my.js ，但事件处理程序的设置不起作用。 为什么它不起作用，我该怎么做才能使它起作用？

function myFunction1(input) {
    input.value = input.value.toUpperCase();
}

document.getElementById("fname").onchange =  myFunction1;

如果我将 Javascript 文件的内容替换为

function myFunction2() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
}

document.getElementById("fname").onchange =  myFunction2;

事件处理程序工作。 我想知道为什么这两种方法有这么大的区别？

在外部 Javascript 文件或 html 文件中，首选哪种方式来指定事件处理程序的设置？

Answer 1

它不起作用的原因与脚本位于外部文件中无关。 这是因为您假设对 DOM 对象的引用作为参数 ( input ) 传递给函数，但事实并非如此。 input实际上是对事件的引用。 使用对象属性（ onchange等）或通过更现代和基于标准的.addEventListener()设置的事件处理程序会自动传递对作为回调函数的第一个参数调用的事件的引用。

您的第二个版本有效，因为您不依赖于引用 DOM 对象的参数，并且使用document.getElementById("fname")正确获取对 DOM 对象的引用。 但是，实际上，您不需要做任何特殊的事情来获取对触发事件的 DOM 对象的引用，因为该对象将绑定到回调函数中的this关键字。

除此之外，您应该真正放弃通过事件属性（如onchange等）设置事件，因为这种方法限制您只能为每个事件设置一个事件处理函数。 而是使用element.addEventListener()使用现代标准

最后，要将文本内容更改为全部大写，您甚至不需要 JavaScript，因为这可以仅使用 CSS 来完成。

请参阅下面显示所有这些的示例：

 // Get your reference to DOM objects that you'll need just once, when the DOM is available // And, set up events following modern standards: document.getElementById("fname").addEventListener("change", myFunction); // Event handlers are automatically passed a reference // to the event as the handler's first argument. function myFunction(evt) { // Inside of an event handler for a DOM object, you can always // reference the DOM object that triggered the event via the target property // of the event (evt.target in this case) or, even simpler via the "this" keyword. console.log("Event: " + evt.type.toUpperCase() + " was triggered by: " + this.nodeName + " " + this.id + " " + evt.target); this.value = evt.type; }

 /* You don't need JavaScript to convert content to upper case */ #fname { text-transform:uppercase; }

 <p>This example uses the HTML DOM to assign an "onchange" event to an input element.</p> Enter your name: <input type="text" id="fname"> <p>When you leave the input field (just hit TAB after inputting some data), the CHANGE event callback function is triggered.</p>

为什么这种事件处理程序的设置不起作用？

问题描述

1 个解决方案

解决方案1
5 已采纳 2017-12-29 04:08:28

为什么这种事件处理程序的设置不起作用？

问题描述

1 个解决方案

解决方案1 5 已采纳 2017-12-29 04:08:28

解决方案1
5 已采纳 2017-12-29 04:08:28