页面加载与事件绑定-优快云博客

本文链接：https://blog.youkuaiyun.com/aiminXMPP/article/details/9063105

页面从上到下开始加载。执行顺序如下：

1、

$(function () {

alert("Loading");

$("#Label1").click(function () {

alert("你点击了Label1");

})

$("#Label2").click(function () {

alert("你点击了Label1");

})

$("#LinkButton1").click(function () {

alert("你点击了LinkButton1");

})

$("#RadioButton1").click(function () {

alert("你点击了RadioButton1");

})

});

但

  $(function () {
            alert("Loading");
            $("#Label1").click(function () {
                alert("你点击了Label1");
            })
            $("#Label2").click(function () {
                alert("你点击了Label1");
            })
            $("#LinkButton1").click(function () {
                alert("你点击了LinkButton1");
            })
            $("#RadioButton1").click(function () {
                alert("你点击了RadioButton1");
            })
        });




里面的代码在页面加载完之后执行




2、

  alert("NotLoading");
         $(".C").click(function () {
             alert("good");
         })但是此时不能为 $(".C")加入click事件，因为此时页面还没有生成元素。




3、
页面加载完之后执行body后面的js代码

script type="text/javascript">
     alert("AfterBody");


     $(".C").click(function () {
         alert("good");
     })
    </script>此时为class为C的元素加入了click事件




4、执行第一步当中
 $(function () {
            alert("Loading");
            $("#Label1").click(function () {
                alert("你点击了Label1");
            })
            $("#Label2").click(function () {
                alert("你点击了Label1");
            })
            $("#LinkButton1").click(function () {
                alert("你点击了LinkButton1");
            })
            $("#RadioButton1").click(function () {
                alert("你点击了RadioButton1");
            })
        });






完整页面如下：



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
alert("first");
        $(function () {
            alert("Loading");
            $("#Label1").click(function () {
                alert("你点击了Label1");
            })
            $("#Label2").click(function () {
                alert("你点击了Label1");
            })
            $("#LinkButton1").click(function () {
                alert("你点击了LinkButton1");
            })
            $("#RadioButton1").click(function () {
                alert("你点击了RadioButton1");
            })
        });
      
    </script>
     <script type="text/javascript">
         alert("NotLoading");


         $(".C").click(function () {
             alert("good");
         })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:Label ID="Label2"
            runat="server" Text="Label"></asp:Label>
            <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
            <asp:RadioButton
                ID="RadioButton1" runat="server" />


                <p class="C">点我吧！</p>
    </div>
    </form>
  
</body>
 <script type="text/javascript">
     alert("AfterBody");


     $(".C").click(function () {
         alert("good");
     })
    </script>
</html>

JS在页面中的执行顺序