basic02.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script>
        
        window.onload = function () {
            
            function func1() {
                var oBtn1 = document.getElementById("btn1")
                var oBtn2 = document.getElementById("btn2")
                var oBtn3 = document.getElementById("btn3")

                // 这里的事件采用匿名函数,匿名函数主要用来执行命令的
                oBtn1.onmouseenter = function () {
                    console.log("鼠标滑过...");
                }
                oBtn2.onclick = function () {
                    console.log("鼠标点击...");
                }
                oBtn3.onmouseleave = function () {
                    console.log("鼠标离开...");
                }

                // id也可以添加到head中的标签身上，
                // 比如link的css外链式，通过id来设置css的href属性来实现加载不同的网页皮肤
                // 如果标签有自己的类或者修改类名为类名2来切换css样式
            }

            func1();
        }

    </script>
</head>
<body>

    <button id="btn1">鼠标滑过</button>
    <button id="btn2">鼠标点击</button>
    <button id="btn3">鼠标离开</button>

</body>
</html>