jQuery事件绑定

1 新建页面文件index.htm

新建页面文件index.htm,页面代码如下所示。

实例代码1

            <script type="text/javascript">        function btnClick() {            var oTxtValue = document.getElementById("txtName");            var oDivResult = document.getElementById("divResult");            oDivResult.innerHTML = "Hello,"+oTxtValue.value+"!";        }    《script》
请输入贵客的姓名：
姓名：
onclick="btnClick();"/>

2 执行效果

使用chrome执行index.htm文件，得到图1所示画面，在“姓名”文本框输入“YL”，点击“确定”按钮，在按钮的下一行会显示“Hello，YL！”（效果如图2所示）。

（图1） （图2）<??"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PGJyPgo8L3A+CjxwPjxzdHJvbmc+MyC0+sLrt9bO9jwvc3Ryb25nPjwvcD4KPHA+tMu0prKiw7vT0Mq508NqUXVlcnnW0LXEysK8/rDztqi3vbeooaO2+Mq508O1xMrHSmF2YVNjcmlwdNbQtcTKwrz+sPO2qLe9t6ihozwvcD4KPHA+vt/M5df3t6jKx6O6yrnTw7T6wuuhsG9uY2xpY2s9"btnClick();"”为按钮的onclick事件绑定方法btnClick()，而方法btnClick()在代码“<script type="text/javascript">...《script》”中定义。

4 修改页面文件index.htm

修改页面文件index.htm，采用jQuery中的事件绑定方法为按钮绑定方法。修改后的代码如下所示。

实例代码2

        <script language="javascript" type="text/javascript" src="Jscript/jquery-2.0.2.min.js">《script》        <script type="text/javascript">        $(function () {            $("#btnOK").click(function(){                var oTxtValue = $("#txtName").val();                $("#divResult").html("Hello," + oTxtValue + "!");            });        });    《script》
请输入贵客的姓名：
姓名：

5 代码分析

此处的执行结果与图1，图2所示效果一样。

此处使用jQuery中的事件绑定方法。具体代码为“$("#btnOK").click(function(){}）”。绑定事件也可以通过bind方法来完成，具体代码如下所示。

<script type="text/javascript">    $(function () {        $("#btnOK").bind("click",function(){        var oTxtValue = $("#txtName").val();        $("#divResult").html("Hello," + oTxtValue + "!");        });    });《script》

修改后的代码如下所示。

实例代码3

        <script language="javascript" type="text/javascript" src="Jscript/jquery-2.0.2.min.js">《script》        <script type="text/javascript">        $(function () {        });        $("#btnOK").bind("click",function(){            var oTxtValue = $("#txtName").val();            $("#divResult").html("Hello," + oTxtValue + "!");        });    《script》
请输入贵客的姓名：
姓名：

请睁大双眼，看看都改动了些什么？

其实就是将事件绑定的代码（加粗部分）由“ $(function () {});”内部移到了其外部。

这样修改的话，结果又会怎么样呢？

执行修改后的文件，你会发现在“姓名”文本框输入“YL”后，在“确定”按钮的下一行并没有出现“Hello，YL！”的字符串。

为什么呢？

那是因为：放在“ $(function () {});”内部时，事件绑定的代码需要等整个页面的DOM树解析完毕才执行，这时当然可以正常地为按钮绑定事件方法了。要是放在“ $(function () {});”外部时，我们知道，页面代码自上而下进行加载，执行到按钮的事件绑定代码时，按钮元素还没有被加载，这样的话，执行按钮事件绑定代码肯定会失败的。

7 再做一个小实验

修改代码，得到如下代码。

实例代码4

        <script language="javascript" type="text/javascript" src="Jscript/jquery-2.0.2.min.js">《script》        <script type="text/javascript">        $(function () {        });    《script》
请输入贵客的姓名：
姓名：
    <script type="text/javascript">        $("#btnOK").bind("click", function () {            var oTxtValue = $("#txtName").val();            $("#divResult").html("Hello," + oTxtValue + "!");        });   《script》

再次执行页面，一切正常。至于原因，我想你是懂的。

接下来，我们将视线转移至实例代码1部分，你会发现事件绑定的方法的定义代码也是在按钮元素的前面被加载，但是结果也是正常的，是不是因为这部分代码在执行到onclick="btnClick();"部分才执行，看来应该是的。

好了，就写这么多了。