JavaScript内联与传统注册

javascript inline vs. traditional registration

本文关键字：传统 注册 JavaScript      更新时间：2023-09-26

我是js新手，我正在尝试掌握内联与传统注册。 代码块 1（内联）工作正常，但代码块 2（传统）工作不正常。谁能阐明我的错误？

<html>
<head>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js"></script>
<script>
function gethash() {
var name=prompt("Please enter your name","Harry Potter");
var hash = CryptoJS.MD5(name);
alert("Hello, " + name +".'nYour hash is " + hash)
}
</script>
</head>
<body>
<input type="button" onclick="gethash()" value="Get your hash" />
</body>
</html>

这种使用传统注册的尝试不起作用：

<html>
<head>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js"></script>
<script type="text/javascript">
function gethash() {
var name=prompt("Please enter your name","Harry Potter");
var hash = CryptoJS.MD5(name);
alert("Hello, " + name +".'nYour hash is " + hash)
}
document.getElementById('myname').onclick = gethash;
</script>
</head>
<body>
<input type="button" value="Get your hash" id="myname" />
</body>
</html>

在您尝试使用 onclick 绑定某些内容时没有这样的元素。将该行移动到文件底部。

如果您查看控制台，您应该会看到如下错误：

未捕获的类型错误：无法设置空的属性"onclick"

这应该可以解决它：

<html>
<head>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js"></script>
</head>
<body>
<input type="button" value="Get your hash" id="myname" />
<script type="text/javascript">
function gethash() {
var name=prompt("Please enter your name","Harry Potter");
var hash = CryptoJS.MD5(name);
alert("Hello, " + name +".'nYour hash is " + hash)
}
document.getElementById('myname').onclick = gethash;
</script>
</body>
</html>

这导致我们找到更好的方法来做到这一点。使用 window.onload ，您可以在加载所有内容后执行 JS 代码。

window.onload = function() {
    document.getElementById('myname').onclick = gethash;
};

调用 document.getElementById('myname').onclick = gethash; 时，您尝试将事件绑定到的元素尚不存在。

您需要将代码放在 onload 事件中，如下所示：

<html>
    <head>
        <script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js"></script>
        <script type="text/javascript">
            function gethash() {
                var name=prompt("Please enter your name","Harry Potter");
                var hash = CryptoJS.MD5(name);
                alert("Hello, " + name +".'nYour hash is " + hash)
            }
            window.onload = function() {
                document.getElementById('myname').onclick = gethash;
            }
        </script>
    </head>
    <body>
    <input type="button" value="Get your hash" id="myname" />
    </body>
</html>

使用 onload 并不理想，因为它在触发之前等待所有资源加载。使用 DOMContentLoaded 事件会更好，或者为了跨浏览器兼容性，请查看 jQuery 等库。

附带说明一下，将演示文稿和逻辑分开是一个非常好的主意，因此应避免使用内联事件处理程序。

sachleen 是正确的（下面的代码有效） - 尽管您可以简单地将整个 JavaScript 块移动到 body 标签的末尾：

<html>
<head>
    <script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js"></script>
</head>
<body>
    <input type="button" value="Get your hash" id="myname" />
    <script type="text/javascript">
        function gethash() {
            var name=prompt("Please enter your name","Harry Potter");
            var hash = CryptoJS.MD5(name);
            alert("Hello, " + name +".'nYour hash is " + hash)
        }
        document.getElementById('myname').onclick = gethash;
    </script>
</body>
</html>
相关文章：