Jquery中的事件与动画
一、window.onload和$(document).read()的细微差别
（1）执行时机
window.onload:所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行
$(document).read()：在DOM完全就绪时就可以被调用
（2）多次使用
$(document).read()可以多次使用，在现有的行为上追加新的行为，依次执行
window.onload事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数 其弊端是：当有多个javascript文件时，每个文件都需要用到window.onload方法
(3)简写方式
二、事件
基础事件：
window事件
鼠标事件：
点击事件：click（）、
鼠标指针移过时：mouseover（）、
鼠标指针移出时：mouseout（）
键盘事件：
按下按键时：keydown（）
产生可打印的字符:keypress()
释放按键时：keyup（）
表单事件：
获得焦点：focus（）
失去焦点：blur（）
复合事件：
hover（）和toggle（）
hover（）
三、事件的绑定
简单绑定事件
合成事件
toggle() 方法
示例如下 模拟第一种toggle（fn1，fn2，...,fn）方法模拟鼠标连续单击事件
<title>制作FAQ列表页</title>
<style type="text/css">
#containt {
width:700px;
margin:0px auto;
}
.one .top{
background-color:#D9EFED;
height:33px;
line-height:33px;
width:700px;
padding-left:28px;
color:#168750;
font-weight:bold;
margin-top:10px;
}
.cion {
background:url("img3/2.jpg") no-repeat;
}
.jia {
background:url("img3/2.jpg") no-repeat;
}
.jian {
background:url("img3/1.jpg") no-repeat;
}
div.content{
display:none;
padding:5px;
width:495px;
border:1px solid #D9EFED;
}
</style>
<script src="js//jquery1.11.1.js" type="text/javascript"></script>
<script src="js/jquery-migrate-1.2.0.js"></script>
<script type="text/javascript">
$(function () {
$(".top").bind({
mouseover: function () {
$(this).css("background","pink");
},
mouseout: function () {
$(this).css("background", "");
}
});
//使用过滤选择器实现可见和隐藏的切换
//$(".top").click(function () {
// if ($(this).siblings(".content").is(":visiable")) {
// $(this).siblings(".content").hide();
// } else {
// $(this).siblings(".content").show();
// }
//});
//使用toggle实现元素的可见和隐藏状态
$(".top").toggle(
function () {
$(this).find(".cion").removeClass(‘jia‘).addClass(‘jian‘);
$(this).siblings(".content").show(1500);
},
function () {
$(this).find(".cion").removeClass(‘jian‘).addClass(‘jia‘);
$(this).siblings(".content").hide(‘slow‘);
}
);
});
</script>
</head>
<body>
<div id="containt">
<div class="one">
<div class="top"><span class="cion">    什么是人身保险？</span></div>
<div class="content">
<img src="img3/gd.jpg" />
<a href="#">人身保险</a>是以人的寿命和身体为保险标准的保险，当被保险人发生死亡、伤残 、疾病、年老等风险事故时或者达到合约的年龄、期限时，保险公司按照保险合同约定提供经济补偿或给付保险金。人身保险具有保障和长期存储功能，可以用于为人们的生活进行长期财务规划。
</div>
</div>
<div class="one">
<div class="top"><span class="cion">    什么是保险合同？</span></div>
<div class="content">
<img src="img3/gd.jpg" />
<a href="#">人身保险</a>是以人的寿命和身体为保险标准的保险，当被保险人发生死亡、伤残 、疾病、年老等风险事故时或者达到合约的年龄、期限时，保险公司按照保险合同约定提供经济补偿或给付保险金。人身保险具有保障和长期存储功能，可以用于为人们的生活进行长期财务规划。
</div>
</div>
<div class="one">
<div class="top"><span class="cion">    什么是保险人？</span></div>
<div class="content">
<img src="img3/gd.jpg" />
<a href="#">人身保险</a>是以人的寿命和身体为保险标准的保险，当被保险人发生死亡、伤残 、疾病、年老等风险事故时或者达到合约的年龄、期限时，保险公司按照保险合同约定提供经济补偿或给付保险金。人身保险具有保障和长期存储功能，可以用于为人们的生活进行长期财务规划。
</div>
</div>
<div class="one">
<div class="top"><span class="cion">    什么是投保人？</span></div>
<div class="content">
<img src="img3/gd.jpg" />
<a href="#">人身保险</a>是以人的寿命和身体为保险标准的保险，当被保险人发生死亡、伤残 、疾病、年老等风险事故时或者达到合约的年龄、期限时，保险公司按照保险合同约定提供经济补偿或给付保险金。人身保险具有保障和长期存储功能，可以用于为人们的生活进行长期财务规划。
</div>
</div>
</div>
</body>
</html>
注意：当发现相同的选择器在代码中出现多次。可以用变量把它缓存起来，可以提高代码效率
事件冒泡：
事件冒泡示例：
<title>事件冒泡</title>
<script src="js//jquery1.11.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事件
$(‘span‘).bind("click", function () {
var txt = $(‘#msg‘).html() + "<p>外层div元素被单击</p>";
$("#msg").html(txt);
});
//为body元素绑定click事件
$(‘span‘).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 id="msg"></div>
</body>
</html>
当单击<span>元素时 输出结果为
事件会按照dom的层次结构像水泡一样不断向上直至顶端，故称为事件冒泡
事件冒泡引发的问题：
触发了我们不想触发的事件，本来我们只去触发span的事件，但div和body却也被触发，所以我们不希望这种事情发生
为了解决这个问题 我们引出一下内容（事件对象、停止事件冒泡、阻止默认行为、事件捕获）
事件对象
$("span").bind("click",function(event){ event:事件对象
//...........
});
当单击span元素时，事件对象就被创建了，这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁
停止事件冒泡
停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行，在jquery中提供了stopPropagation（）方法来停止事件冒泡
$(‘span‘).bind("click", function (event) {
var txt = $(‘#msg‘).html() + "<p>内层span元素被单击</p>";
$("#msg").html(txt);
event.stopPropagation（）;
});
这样就可以防止上述冒泡事件的发生
阻止默认行为
网页中的元素有自己默认的行为，例如，单击超链接后会跳转、单击提交按钮后表单会提交，有事需要阻止元素的默认行为
在jquery中，提供了preventDefault（）方法来阻止元素的默认行为
如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false，这是对在事件对象上同时调用stopPrapagation（）方法和preventDeafault（）方法的
一种简写方式
事件捕获
事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始出发
事件捕获是从最外层元素开始，然后再到嘴里曾元素
遗憾的是，并非所有浏览器都支持事件捕获，并且这个缺陷无法通过javascript来修复，jquery不支持事件捕获，如果需要使用事件捕获，就是用原生的javascript
四、事件对象的属性
jquery在遵循w3c规范的情况下，对事件对象那个的常用属性进行了封装，是的事件处理在个个浏览器下都可以正常运行而不需要进行浏览器类型判断
原文：http://www.cnblogs.com/hmy-1365/p/5520664.html