JavaScript 事件处理程序不工作答案

【问题标题】：JavaScript Event Handlers Not WorkingJavaScript 事件处理程序不工作
【发布时间】：2014-06-19 04:12:39
【问题描述】：

我正在尝试通过不同的方法添加两个事件处理程序，一个使用 document.getElementById，另一个使用内联 css。我遇到的问题是只有对 JS 函数的内联调用才有效。在网上查看各种示例后，我找不到任何问题。提前致谢。

HTML 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Dynamic Button</title>
</head>
<body>
    <script type="text/javascript" src="button.js"></script>
    <button type="button" id="AButton" onmouseover="DisplayAlert2();">Button</button>
</body>
</html>

JavaScript

function DisplayAlert1(){
    window.alert("Alert 1");
}

function DisplayAlert2(){
    window.alert("Alert 2");
}

var AButtonJS = document.getElementById("AButton");
AButtonJS.onclick = DisplayAlert1;

【问题讨论】：

对我有用：jsfiddle.net/FE6Q3 DisplayAlert2() 在 html 中，但由于您的初始化脚本，它会被 DisplayAlert1() 覆盖。这是在加载dom之后运行吗？（至少在 html 中的 AButton 之后？）
如何分配给 onclick 属性来替换 onmouseover 监听器的值?

标签： javascript html

【解决方案1】：

您的问题是脚本元素在按钮元素存在于 DOM 之前已加载并（几乎可以肯定）执行。交换他们的位置，它应该可以正常工作：

<button type="button" id="AButton" onmouseover="DisplayAlert2();">Button</button>
<script src="button.js"></script>

修改 DOM 的脚本应该在加载事件之后调用，或者 DOM 准备好，或者直接放在结束 body 标记之前，以便在 DOM 加载后执行。

顺便说一下，脚本元素的 type 属性仅在脚本不是 javascript 时才是必需的。此外，按照惯例，以大写字母开头的函数名称是为构造函数保留的，因此请调用您的函数 displayAlert1 和 displayAlert2。

【讨论】：