执行顺序

最新推荐文章于 2022-03-29 22:00:23 发布

栗子鱿鱼

最新推荐文章于 2022-03-29 22:00:23 发布

阅读量137

点赞数

分类专栏： # js

本文链接：https://blog.csdn.net/qq_45083168/article/details/112576259

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JS代码的执行顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS代码的执行顺序</title>
</head>
<!-- load事件什么时候发生？页面全部元素加载完毕之后才会发生。-->
<body onload="ready()">
    <script type="text/javascript">
        // 无效。因为btn没有加载
        /*document.getElementById("btn").οnclick=function () {
            alert("(*╹▽╹*)")
        }*/

        function ready() {
            document.getElementById("btn").onclick=function () {
                alert("(*╹▽╹*)")
            }
        }
    </script>
    <input type="button" value="点我" id="btn">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS代码的执行顺序</title>
</head>
<body>
    <script type="text/javascript">
        /*window.onload = ready; // 页面加载完毕，ready函数才执行
        function ready() {
            document.getElementById("btn").οnclick=function () {
                alert("(*╹▽╹*)")
            }
        }*/
        
        // 页面加载的过程中,将a函数注册给了load事件
        // 页面加载完毕之后,load事件发生了,此时执行回调函数a
        // 回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
        // 当id="btn"的节点发生click事件之后,b函数被调用并执行
        window.onload = function () { // a
            document.getElementById("btn").onclick=function () { // b
                alert("(*╹▽╹*)")
            }
        }
    </script>
    <input type="button" value="点我" id="btn">
</body>
</html>

栗子鱿鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
执行顺序

JS代码的执行顺序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS代码的执行顺序</title></head><body onload="ready()"> <script type="text
复制链接

扫一扫

专栏目录