js页面加载添加点击事件

在JavaScript中，给页面元素添加点击事件常见的方法有addEventListener。

基础概念： addEventListener是用于在指定元素上添加事件监听器的DOM方法。

优势：

可以为一个元素的同一种事件添加多个处理函数，彼此之间不会冲突。
更加灵活和强大，能够更好地控制事件的行为。

类型：常见的事件类型众多，比如click（点击）、mouseover（鼠标移入）、mouseout（鼠标移出）等。

应用场景：

实现按钮的点击交互，例如提交表单、切换页面内容等。
响应用户的点击操作来展示或隐藏某些元素。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="myButton">点击我</button>

    <script>
        // 获取按钮元素
        const button = document.getElementById('myButton');

        // 添加点击事件监听器
        button.addEventListener('click', function () {
            alert('按钮被点击了！');
        });
    </script>
</body>

</html>

如果遇到添加点击事件不生效的问题，可能的原因及解决方法：