你的问题是你忘了在函数名后面添加
()
。
此外,还有几个要纠正的地方:
不要使用内联 HTML 事件属性(onclick
、onmouseover
等),因为它们:
- 创建难以阅读和调试的“意大利面代码”。
- 导致代码重复。
- 不具备良好的扩展性。
- 不遵循关注点分离的开发方法论。
- 会在回调函数中创建匿名全局包装函数,改变了
this
绑定。
- 不遵循W3C事件标准。
- 不会将对 DOM 事件的引用传递给处理程序。
连MDN都同意
内联事件处理程序 - 不要使用这些
你可能在你的代码中也会看到这样的模式:
<button onclick="bgChange()">Press me</button>
function bgChange() {
const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
document.body.style.backgroundColor = rndCol;
}
在 Web 上注册事件处理程序的最早方法是使用事件处理程序 HTML 属性(或内联事件处理程序),就像上面显示的那样 - 属性值实际上是您希望在事件发生时运行的 JavaScript 代码。上面的示例调用了在同一页上定义的
script
元素中的函数,但您也可以直接将 JavaScript 插入到属性中,例如:
<button onclick="alert('This is my old-fashioned event handler!');">Press me</button>
你可以找到许多事件处理程序属性的HTML属性等效物;然而,你不应该使用它们——这被认为是一种不好的做法。如果你只是做一些很快的事情,使用事件处理程序属性可能看起来很简单,但它们很快就会变得难以管理和低效。
首先,将HTML和JavaScript混在一起并不是一个好主意,因为这样会变得难以阅读。将JavaScript与HTML分开是一种良好的实践,如果它在一个单独的文件中,你可以将其应用于多个HTML文档。
即使在一个文件中,内联事件处理程序也不是一个好主意。一个按钮还可以接受,但如果有100个按钮呢?你将不得不向文件中添加100个属性;它很快就会变成一个维护噩梦。使用JavaScript,你可以轻松地为页面上的所有按钮添加一个事件处理程序函数,无论有多少个按钮,可以像这样做:
const buttons = document.querySelectorAll("button");
for (const button of buttons) {
button.addEventListener("click", bgChange);
}
最后,许多常见的服务器配置将禁止内嵌 JavaScript,作为一种安全措施。
你永远不应该使用 HTML 事件处理程序属性-这些已过时,使用它们是不良实践。
相反,将所有工作都放在 JavaScript 中,并使用
.addEventListener()
来设置事件处理程序。
不要在可以使用按钮(或其他元素)的情况下使用超链接。如果你确实要使用超链接,你需要禁用其默认的导航行为,这可以通过将
href
属性设置为
#
而不是
""
来实现。
var btn = document.getElementById("btnChangeSrc");
var iFrame = document.getElementById("contentFrame");
btn.addEventListener("click", getContent);
function getContent() {
console.log("Old source was: " + iFrame.src);
iFrame.src="LoremIpsum.html";
console.log("New source is: " + iFrame.src);
}
<div class="sidebar"><h1>Technical Documentation</h1>
<ul>
<li>Configuration Guides</li>
<li>API Guides</li>
</ul>
<button id="btnChangeSrc">Change Source</button>
</div>
<iframe class="content" id="contentFrame" src="dummy.html"></iframe>