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()设置的事件处理程序会自动传递对作为回调函数调用的事件的引用＆＃39第一个论点。

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

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

来使用现代标准

最后，要将文字内容更改为全部大写，您甚至不需要JavaScript，因为只能使用CSS。

请参阅下面的示例，其中显示了所有这些：

＆＃13;

// 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;
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: