jQuery事件绑定

最新推荐文章于 2023-03-22 08:30:04 发布

三五月儿

最新推荐文章于 2023-03-22 08:30:04 发布

阅读量2.4k

点赞数 1

分类专栏： JQuery 文章标签： jQuery JavaScript bind onclick click

本文链接：https://blog.csdn.net/yl2isoft/article/details/17487097

版权

JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1 新建页面文件index.htm

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

实例代码1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>事件绑定</title>
    <style type="text/css">
        body{font-size:10pt}
        .divFrame{width:210px;border:solid 1px #555}
        .divTitle{background-color:#eee;padding:5px}
        .divContent{padding:5px}
        .btnCss{width:50px}
        .divResult{width:200px;padding:5px;color:red}
    </style>
    <script type="text/javascript">
        function btnClick() {
            var oTxtValue = document.getElementById("txtName");
            var oDivResult = document.getElementById("divResult");
            oDivResult.innerHTML = "Hello,"+oTxtValue.value+"!";
        }
    </script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">请输入贵客的姓名：</div>
<div class="divContent">
姓名：<input id="txtName" type="text" class="txtCss"/><br/>
<input id="btnOK" type="button" value="确定" class="btnCss" οnclick="btnClick();"/>
</div>
<div id="divResult" class="divResult"></div>
</div>
</body>
</html>

2 执行效果

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

（图1）（图2）

3 代码分析

此处并没有使用jQuery中的事件绑定方法。而使用的是JavaScript中的事件绑定方法。

具体作法是：使用代码“οnclick="btnClick();"”为按钮的onclick事件绑定方法btnClick()，而方法btnClick()在代码“<script type="text/javascript">...</script>”中定义。

4 修改页面文件index.htm

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

实例代码2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>事件绑定</title>
    <script language="javascript" type="text/javascript" src="Jscript/jquery-2.0.2.min.js"></script>
    <style type="text/css">
        body{font-size:10pt}
        .divFrame{width:210px;border:solid 1px #555}
        .divTitle{background-color:#eee;padding:5px}
        .divContent{padding:5px}
        .btnCss{width:50px}
        .divResult{width:200px;padding:5px;color:red}
    </style>
    <script type="text/javascript">
        $(function () {
            $("#btnOK").click(function(){
                var oTxtValue = $("#txtName").val();
                $("#divResult").html("Hello," + oTxtValue + "!");
            });
        });
    </script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">请输入贵客的姓名：</div>
<div class="divContent">
姓名：<input id="txtName" type="text" class="txtCss"/><br/>
<input id="btnOK" type="button" value="确定" class="btnCss"/>
</div>
<div id="divResult" class="divResult"></div>
</div>
</body>
</html>

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>

6 再次修改代码

修改后的代码如下所示。

实例代码3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>事件绑定</title>
    <script language="javascript" type="text/javascript" src="Jscript/jquery-2.0.2.min.js"></script>
    <style type="text/css">
        body{font-size:10pt}
        .divFrame{width:210px;border:solid 1px #555}
        .divTitle{background-color:#eee;padding:5px}
        .divContent{padding:5px}
        .btnCss{width:50px}
        .divResult{width:200px;padding:5px;color:red}
    </style>
    <script type="text/javascript">
        $(function () {
        });
        $("#btnOK").bind("click",function(){
            var oTxtValue = $("#txtName").val();
            $("#divResult").html("Hello," + oTxtValue + "!");
        });
    </script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">请输入贵客的姓名：</div>
<div class="divContent">
姓名：<input id="txtName" type="text" class="txtCss"/><br/>
<input id="btnOK" type="button" value="确定" class="btnCss"/>
</div>
<div id="divResult" class="divResult"></div>
</div>
</body>
</html>

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

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

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

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

为什么呢？

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

7 再做一个小实验

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

实例代码4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>事件绑定</title>
    <script language="javascript" type="text/javascript" src="Jscript/jquery-2.0.2.min.js"></script>
    <style type="text/css">
        body{font-size:10pt}
        .divFrame{width:210px;border:solid 1px #555}
        .divTitle{background-color:#eee;padding:5px}
        .divContent{padding:5px}
        .btnCss{width:50px}
        .divResult{width:200px;padding:5px;color:red}
    </style>
    <script type="text/javascript">
        $(function () {
        });
    </script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">请输入贵客的姓名：</div>
<div class="divContent">
姓名：<input id="txtName" type="text" class="txtCss"/><br/>
<input id="btnOK" type="button" value="确定¨" class="btnCss"/>
</div>
<div id="divResult" class="divResult"></div>
</div>
    <script type="text/javascript">
        $("#btnOK").bind("click", function () {
            var oTxtValue = $("#txtName").val();
            $("#divResult").html("Hello," + oTxtValue + "!");
        });
   </script>
</body>
</html>

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

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

好了，就写这么多了。

三五月儿

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
jQuery事件绑定

1 新建页面文件index.htm新建页面文件index.htm,页面代码如下所示。实例代码1 事件绑定 body{font-size:10pt} .divFrame{width:210px;border:solid 1px #555} .divTitle{background-color:#eee;padding:
复制链接

扫一扫