首页 > 代码库 > 第四章 jQuery中的事件

第四章 jQuery中的事件

http://www.cnblogs.com/shuibing/p/4077195.html

1.加载DOM

  jQuery中,在$(document).ready()方法内注册的事件,只要DOM就绪就会被执行,此时可能元素的关联文件未下载完。

  jQuery中的 load()方法,会在元素的onload事件中绑定一个处理函数。比如$(window).load(function(){...}),等价于 JavaScript中的window.onload=function(){...},该方法需要等网页所有元素都加载完(包括管理文件)。

  2.事件绑定

  在文档装载完之后,可以为元素绑定事件来完成一些操作。可以使用bind()方法来对匹配元素进行特定的事件绑定。

  语法: bind(type,[data],fn);

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>4-2-3</title><script src=http://www.mamicode.com/"../../scripts/jquery-1.3.1.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"../../css/style.css" /><script type="text/javascript">$(function(){    $("#panel h5.head").bind("click",function(){        var $content = $(this).next();        if($content.is(":visible")){            $content.hide();        }else{            $content.show();        }    })})</script></head><body><div id="panel">    <h5 class="head">什么是jQuery?</h5>    <div class="content">        jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。    </div></div></body></html>
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>4-2-4</title><script src=http://www.mamicode.com/"../../scripts/jquery-1.3.1.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"../../css/style.css" /><script type="text/javascript">$(function(){    $("#panel h5.head").bind("mouseover",function(){        $(this).next().show();    });      $("#panel h5.head").bind("mouseout",function(){         $(this).next().hide();    })})</script></head><body><div id="panel">    <h5 class="head">什么是jQuery?</h5>    <div class="content">        jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。    </div></div></body></html>

  3.合成事件

  jQuery中有2个合成事件,hover()方法与toggle()方法。

  hover() 语法:hover(enter,leave);  用来模拟光标悬停事件。

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>4-3-1</title><script src=http://www.mamicode.com/"../../scripts/jquery-1.3.1.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"../../css/style.css" /><script type="text/javascript">$(function(){    $("#panel h5.head").hover(function(){        $(this).next().show();    },function(){        $(this).next().hide();       })})</script></head><body><div id="panel">    <h5 class="head">什么是jQuery?</h5>    <div class="content">        jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。    </div></div></body></html>

  toggle()语法:toggle(fn1,fn2,...fnN); 用来模拟鼠标连续单击事件。

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>4-3-3</title><script src=http://www.mamicode.com/"../../scripts/jquery-1.3.1.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"../../css/style.css" /><script type="text/javascript">$(function(){    $("#panel h5.head").toggle(function(){            $(this).next().toggle();    },function(){            $(this).next().toggle();    })})/*$(function(){    $("#panel h5.head").click(function(){            $(this).next().toggle();    })})*/</script></head><body><div id="panel">    <h5 class="head">什么是jQuery?</h5>    <div class="content">        jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。    </div></div></body></html>

  4.事件冒泡

  意思就是说,页面上有多个元素响应同一个事件。事件会按照DOM的层次结构像水泡一样不断往上至顶。

<!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>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>4-4-1</title>    <style type="text/css">        *        {            margin: 0;            padding: 0;        }        body        {            font-size: 13px;            line-height: 130%;            padding: 60px;        }        #content        {            width: 220px;            border: 1px solid #0050D0;            background: #96E555;        }        span        {            width: 200px;            margin: 10px;            background: #666666;            cursor: pointer;            color: white;            display: block;        }        p        {            width: 200px;            background: #888;            color: white;            height: 16px;        }    </style>    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            // 为span元素绑定click事件            $(span).bind("click", function () {                var txt = $(#msg).html() + "<p>内层span元素被点击.<p/>";                $(#msg).html(txt);            });            // 为div元素绑定click事件            $(#content).bind("click", function () {                var txt = $(#msg).html() + "<p>外层div元素被点击.<p/>";                $(#msg).html(txt);            });            // 为body元素绑定click事件            $("body").bind("click", function () {                var txt = $(‘#msg‘).html() + "<p>body元素被点击.<p/>";                $(‘#msg‘).html(txt);            });        })    </script></head><body>    <div id="content">        外层div元素 <span>内层span元素</span> 外层div元素    </div>    <div id="msg">    </div></body></html>

  停止冒泡

<!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>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>Panel</title>    <style type="text/css">        *        {            margin: 0;            padding: 0;        }        body        {            font-size: 13px;            line-height: 130%;            padding: 60px;        }        #content        {            width: 220px;            border: 1px solid #0050D0;            background: #96E555;        }        span        {            width: 200px;            margin: 10px;            background: #666666;            cursor: pointer;            color: white;            display: block;        }        p        {            width: 200px;            background: #888;            color: white;            height: 16px;        }    </style>    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            // 为span元素绑定click事件            $(span).bind("click", function (event) {                var txt = $(#msg).html() + "<p>内层span元素被点击.<p/>";                $(#msg).html(txt);                event.stopPropagation();    //  阻止事件冒泡            });            // 为div元素绑定click事件            $(#content).bind("click", function (event) {                var txt = $(#msg).html() + "<p>外层div元素被点击.<p/>";                $(#msg‘).html(txt);                event.stopPropagation();    //  阻止事件冒泡            });            // 为body元素绑定click事件            $("body").bind("click", function () {                var txt = $(‘#msg‘).html() + "<p>body元素被点击.<p/>";                $(‘#msg‘).html(txt);            });        })    </script></head><body>    <div id="content">        外层div元素 <span>内层span元素</span> 外层div元素    </div>    <div id="msg">    </div></body></html>
<!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>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>4-4-4</title>    <style type="text/css">        *        {            margin: 0;            padding: 0;        }        body        {            font-size: 13px;            line-height: 130%;            padding: 60px;        }        #content        {            width: 220px;            border: 1px solid #0050D0;            background: #96E555;        }        span        {            width: 200px;            margin: 10px;            background: #666666;            cursor: pointer;            color: white;            display: block;        }        p        {            width: 200px;            background: #888;            color: white;            height: 16px;        }    </style>    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            // 为span元素绑定click事件            $(span).bind("click", function (event) {                var txt = $(#msg).html() + "<p>内层span元素被点击.<p/>";                $(#msg).html(txt);                return false;            });            // 为div元素绑定click事件            $(#content).bind("click", function (event) {                var txt = $(#msg).html() + "<p>外层div元素被点击.<p/>";                $(#msg‘).html(txt);                return false;            });            // 为body元素绑定click事件            $("body").bind("click", function () {                var txt = $(‘#msg‘).html() + "<p>body元素被点击.<p/>";                $(‘#msg‘).html(txt);            });        })    </script></head><body>    <div id="content">        外层div元素 <span>内层span元素</span> 外层div元素    </div>    <div id="msg">    </div></body></html>

  阻止默认行为

<!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>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $("#sub").bind("click", function (event) {                var username = $("#username").val();  //获取元素的值                if (username == "") {     //判断值是否为空                    $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息                    event.preventDefault();  //阻止默认行为 ( 表单提交 )                }            })        })    </script></head><body>    <form action="test.html">    用户名:<input type="text" id="username" />    <br />    <input type="submit" value="提交" id="sub" />    </form>    <div id="msg">    </div></body></html>
<!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>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $("#sub").bind("click", function (event) {                var username = $("#username").val();  //获取元素的值                if (username == "") {     //判断值是否为空                    $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息                    return false;                }            })        })    </script></head><body>    <form action="test.html">    用户名:<input type="text" id="username" />    <br />    <input type="submit" value="提交" id="sub" />    </form>    <div id="msg">    </div></body></html>

  5.事件对象的属性

  jQuery对事件对象常用的属性进行了封装。

  (1)event.type 可以获取事件的类型

<!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>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <!--   引入jQuery -->    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script>        $(function () {            $("a").click(function (event) {                alert(event.type); //获取事件类型                return false; //阻止链接跳转            });        })    </script></head><body>    <a href=‘http://google.com‘>click me .</a></body></html>

  (2)event.target 可以获取出发事件的元素

<!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>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <!--   引入jQuery -->    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script>        $(function () {            $("a[href=http://google.com]").click(function (event) {                alert(event.target.href); //获取触发事件的<a>元素的href属性值                return false; //阻止链接跳转            });        })    </script></head><body>    <a href=‘http://google.com‘>click me .</a></body></html>

  (3)event.pageX和event.pageY 可以获取光标相对于页面的x坐标与y坐标。

<!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>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <!--   引入jQuery -->    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script>        $(function () {            $("a").click(function (event) {                alert("Current mouse position: " + event.pageX + ", " + event.pageY); //获取鼠标当前相对于页面的坐标                return false; //阻止链接跳转            });        })    </script></head><body>    <a href=‘http://google.com‘>click me .</a></body></html>

  (4)event.which 可以在鼠标单击事件中获取鼠标的左中右键,也可以获取键盘键。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--   引入jQuery --><script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script>$(function(){    $("a").mousedown(function(e){        alert(e.which)  // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键        return false;//阻止链接跳转    })})  </script></head><body><a href=‘http://google.com‘>click me .</a></body></html>
<!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>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <!--   引入jQuery -->    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script>        $(function () {            $("input").keyup(function (e) {                alert(e.which);            })        })    </script></head><body>    <input /></body></html>

  6.移除事件

  unbind([type],[data])方法用来移除事件。

<!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>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>4-6-2</title>    <style type="text/css">        *        {            margin: 0;            padding: 0;        }        body        {            font-size: 13px;            line-height: 130%;            padding: 60px;        }        p        {            width: 200px;            background: #888;            color: white;            height: 16px;        }    </style>    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $(#btn).bind("click", function () {                $(#test).append("<p>我的绑定函数1</p>");            }).bind("click", function () {                $(#test).append("<p>我的绑定函数2</p>");            }).bind("click", function () {                $(#test).append("<p>我的绑定函数3</p>");            });            $(#delAll).click(function () {                $(#btn).unbind("click");            });        })    </script></head><body>    <button id="btn">        点击我</button>    <div id="test">    </div>    <button id="delAll">        删除所有事件</button></body></html>
<!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>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>Panel</title>    <style type="text/css">        *        {            margin: 0;            padding: 0;        }        body        {            font-size: 13px;            line-height: 130%;            padding: 60px;        }        p        {            width: 200px;            background: #888;            color: white;            height: 16px;        }    </style>    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $(#btn).bind("click", myFun1 = function () {                $(#test).append("<p>我的绑定函数1</p>");            }).bind("click", myFun2 = function () {                $(#test).append("<p>我的绑定函数2</p>");            }).bind("click", myFun3 = function () {                $(#test).append("<p>我的绑定函数3</p>");            });            $(#delTwo).click(function () {                $(#btn).unbind("click", myFun2);            });        })    </script></head><body>    <button id="btn">        点击我</button>    <div id="test">    </div>    <button id="delTwo">        删除第二个事件</button></body></html>

  one(type,[data],fn)方法可以为元素绑定处理函数,当处理函数触发一次后立即删除。

<!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>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>4-6-4</title>    <style type="text/css">        *        {            margin: 0;            padding: 0;        }        body        {            font-size: 13px;            line-height: 130%;            padding: 60px;        }        p        {            width: 200px;            background: #888;            color: white;            height: 16px;        }    </style>    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $(#btn).one("click", function () {                $(#test).append("<p>我的绑定函数1</p>");            }).one("click", function () {                $(#test).append("<p>我的绑定函数2</p>");            }).one("click", function () {                $(#test).append("<p>我的绑定函数3</p>");            });        })    </script></head><body>    <button id="btn">        点击我</button>    <div id="test">    </div></body></html>

  7.模拟操作

  jQuery中可以使用trigger()方法完成模拟操作。

<!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>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        *        {            margin: 0;            padding: 0;        }        body        {            font-size: 13px;            line-height: 130%;            padding: 60px;        }        p        {            width: 200px;            background: #888;            color: white;            height: 16px;        }    </style>    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $(#btn).bind("click", function () {                $(#test).append("<p>我的绑定函数1</p>");            }).bind("click", function () {                $(#test).append("<p>我的绑定函数2</p>");            }).bind("click", function () {                $(#test).append("<p>我的绑定函数3</p>");            });            $(#btn).trigger("click");        })    </script></head><body>    <button id="btn">        点击我</button>    <div id="test">    </div></body></html>

<!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>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        *        {            margin: 0;            padding: 0;        }        body        {            font-size: 13px;            line-height: 130%;            padding: 60px;        }        p        {            width: 200px;            background: #888;            color: white;            height: 16px;        }    </style>    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $(#btn).bind("myClick", function (event, message1, message2) {                $(#test).append("<p>" + message1 + message2 + "</p>");            });            $(#btn).click(function () {                $(this).trigger("myClick", ["我的自定义", "事件"]);            }).trigger("myClick", ["我的自定义", "事件"]);        })    </script></head><body>    <button id="btn">        点击我</button>    <div id="test">    </div></body></html>

第四章 jQuery中的事件