第四章 jQuery中的事件

　　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="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../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="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../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="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../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="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../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>

PS：参考文献《锋利的jQuery》

时间： 2024-08-16 06:14:52

第四章 jQuery中的事件的相关文章

锋利的jQuery第四章:jQuery中的事件和动画

第一部分 1, (1)$()是$(document)的简写,默认参数是document. $(function(){}是$(document).ready(function(){})的简写. 2, (1)事件绑定 bind(type [,data],fn); type是事件类型,有blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup, mouseover,mousemove,mouseout,mouseenter

web前端之锋利的jQuery四：jQuery中的事件

web前端之锋利的jQuery四:jQuery中的事件 加载DOM: 执行时机: $(document).ready(function(){}); 详情解释 事件绑定: bind(event,data,function) 第一个参数是事件类型,类型包括:blur focus load resize unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter change select submit

jQuery之第4章 jQuery中的事件和动画

一.jQuery中的事件: 1.加载DOM: jQuery:$(document).ready(); JavaScript:window.onload(); $(window).load(function(){ }) 等价于 window.onload = function(){} 简写方式: (1)$(document).ready(functon(){}) (2)$().ready(functon(){}) (3)$(function(){}) 2.事件绑定: bind(); 3.合成事件:

四、jquery中的事件与应用

当用户浏览页面时,浏览器会对页面代码进行解释或编译--这个过程实质上是通过时间来驱动的,即页面在加载时,执行一个Load事件,在这个事件中实现浏览器编译页面代码的过程.时间无论在页面元素本身还是在元素与人机交互中,都占有十分重要的地位. 事件中的冒泡现象: 时间在出发后分为两个阶段,一个是捕获(capture),另一个则是冒泡(bubbling):大多数浏览器不支持捕获阶段,jquery也不支持.因此时间出发后往往执行冒泡过程. 冒泡 <script type="text/javascri

第7章 jQuery中的事件与动画

一.事件: 1.鼠标事件 click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时 dblclick( ) 触发或将函数绑定到指定元素的dblclick事件 双击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的mouseover事件 鼠标指针移过时 子元素有效 mouseout( ) 触发或将函数绑定到指定元素的mouseout事件 鼠标指针移出时 子元素有效 mouseenter( ) 触发或将函数绑定到指定元素的mouseenter事件 鼠标指针进入时 子元素无

jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function(){   // 编写代码... }); $(document).ready()方法的执行时机是在网页中所有DOM结构绘制完毕后就执行,可能此时DOM元素关联的东西(比如图片)并没有加载完. $(document).ready()方法能同时编写多个,每次调用$(document).ready()方法都

锋利的jQuery ——jQuery中的事件和动画（四）

一.jQuery中的事件 1)加载DOM $(document).ready()和window.onload的区别 1>执行时机 $(document).ready(){}  方法内注册的事件,只要DOM就绪就会被执行.  window.onload则是所有内容加载完毕后才会触发. 2>多次使用 js的onload事件一次只能保存对一个函数的引用,他会自动用后面的函数覆盖前面的函数. 3>简写方式 $(document).ready(function(){ 编写代码})==$(funct

jQuery中的事件绑定方法

在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知道,不管你用的是(live/ bind / delegate)之中那个方法,最终都是jQuery底层都是调用on方法来完成最终的事件绑定;.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的; 因此从某种角度来讲除了在书写的方便程度及习惯上挑选,不

jQuery中的事件与动画 (你的明天Via Via)

众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, 通过种种事件实现各项功能或执行某项操作.事件在元素对象与功能代码中起着重要的桥梁作用. 在jQuery中,事件总体分为两大类:简单事件和复合事件. jQuery中的简单事件,与JavaScript中的事件几乎一样,都含有window事件.鼠标事件.键盘事件.表单事件等, 只是其对应的方法名称有略微不