HTML中，给<button>添加onclick事件

<button onclick="">现在的时间是？</button>

常用的给这个button添加onclick事件的几种方式：

1、内联Javascript函数

可以直接在onclick属性中编写 JavaScript 代码。

这种方式简单直接，将函数定义在<script>标签中，然后在onclick属性中调用这个函数。

不过，这种方式会使 HTML 和 JavaScript 代码混合在一起，不利于代码的维护和分离。

例如：

点击查看代码

//方法一
<button onclick="showTime()">现在的时间是？</button>
<script>
    function showTime() {
        let date = new Date();
        let hours = date.getHours();
        let minutes = date.getMinutes();
        let seconds = date.getSeconds();
        alert('现在的时间是：'+ hours +':'+ minutes +':'+ seconds);
    }
</script>



//方法二
<button onclick="console.log(new Date().toLocaleTimeString())">现在的时间是？</button>

2、使用匿名函数

也可以在onclick属性中直接定义一个匿名函数。

这里在onclick属性中定义了一个匿名函数，当按钮被点击时，这个匿名函数就会执行。

但同样，这种方式也会使 HTML 代码变得复杂，并且不利于代码的复用。

例如：

点击查看代码

<button onclick="(function() {
    let date = new Date();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();
    alert('现在的时间是：'+ hours +':'+ minutes +':'+ seconds);
})()">现在的时间是？</button>

3、通过 JavaScript 获取元素并添加事件监听器（推荐方式）

可以先在 HTML 中给按钮一个id，然后在 JavaScript 中获取这个元素并添加事件监听器。

这种方式将 JavaScript 代码与 HTML 代码分离，更符合现代的编程规范。

首先通过document.addEventListener('DOMContentLoaded',...)确保在 DOM 加载完成后再获取元素，

然后使用document.getElementById('timeButton')获取按钮元素，

最后通过button.addEventListener('click',...)为按钮添加点击事件监听器。

这样的代码结构更清晰，便于维护和扩展。

例如：

点击查看代码

<button id="timeButton">现在的时间是？</button>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let button = document.getElementById('timeButton');
        button.addEventListener('click', function() {
            let date = new Date();
            let hours = date.getHours();
            let minutes = date.getMinutes();
            let seconds = date.getSeconds();
            alert('现在的时间是：'+ hours +':'+ minutes +':'+ seconds);
        });
    });
</script>

补充：

DOMContentLoaded 是指在 HTML 文档加载完成后，

DOM（Document Object Model）树已经构建完成并可被操作的状态。

这个事件通常会在页面上的所有资源都加载完毕后触发，包括图片、脚本等。

当 DOMContentLoaded 事件被触发时，

可以执行 JavaScript 代码来操作页面元素或动态加载其他资源。

需要注意的是，**虽然 DOMContentLoaded 表示 DOM 树已经构建完成**，

但并不代表所有的外部资源都已经加载完毕。

如果需要等待所有资源都加载完毕后再执行某些操作，

可以使用 window.load 事件或者 jQuery 的 $(document).ready() 方法。