machinecat520
/
zj-Exercise


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
							<!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>
    <script>

        /**
         * 浏览器在加载一个页面时，是按照自上向下的顺序加载的，
         *  读取到一行就运行一行，如果将script标签写到页面的上边，
         *  在代码执行时，页面还没有加载，DOM对象也没有加载
         *  会导致无法获取到DOM对象
         * 解决方式：
         * 要么写在下面，要么写在上边的window.onload里
         *  最优的方式还是写在下面，但是差距不大
        */
        /**
         * onload事件会在整个页面加载完成之后才触发
         *  为window绑定一个onload事件
         *      该事件对应的响应函数将会在页面加载完成之后执行，
         *      这样就可以确保我们的代码执行时所有的DOM对象已经加载完毕了
        */

        window.onload = function () {
            //获取id为btn的按钮
            var btn = document.getElementById("btn");
            //为按钮绑定一个单击响应函数
            btn.onclick = function () {
                alert("hello");
            };
        };

    </script>
</head>

<body>
    <button id="btn">点我一下</button>
    <script>
        /*
        将js代码编写到页面的下部，就是为了可以在页面加载完毕以后再执行js代码
        */

        //获取id为btn的按钮
        var btn = document.getElementById("btn");
        //为按钮绑定一个单击响应函数
        btn.onclick = function () {
            alert("hello");
        };
    </script>
</body>

</html>