1.加载DOM
在页面加载完毕后，JS用window.onload为DOM元素添加事件，jQuery中，用$(document).ready()为DOM元素添加事件，使用该方法可以在DOM载入就绪时对其进行操作并调用执行它所绑定的函数。
window.onload和$(document).ready()对比
| window.onload=function(){} | $(document).ready(function(){}) | |
| 执行机制 | 必须等到网页中的所有内容加载完毕后（包括图片） | 网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完 |
| 编写个数 | 不能同时编写多个 | 可以同时编写多个 |
| 简化写法 | 无 |
$(document)可以简写为$(),不带参数时默认为document，因此可简写为： ①$(document).ready(function(){}) ②$(function(){}) |
| 对比 |
极大地提高了Web应用程序的相应速度 |
|
| 缺点 |
元素的关联文件未下载完，造成某些属性的无效 |
|
| 解决办法 |
使用另一个关于页面加载的方法——load()方法 |
补充：load()方法会在元素的onload事件中绑定一个处理函数，如果处理函数绑定给window对象，则会在所有内容（包括窗口、框架、对象和图像等）加载完毕后触发，如果处理函数绑定在元素上，会在元素的内容加载完毕后触发。
1 $(window).load(function(){ 2 //编写代码 3 })
2.事件绑定— —bind()方法
格式：bind(type [, data] , fn)
第一个参数是事件类型：blur、focus、load、unload、resize、scroll、click、dblclick、mousedown、mouseover、mouseup、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error
第二个参数是可选参数，作为evert.data属性值传递给事件对象的额外数据对象
第三个餐食是用来绑定的处理函数
补充：判断一个元素是否显示，jQuery中用is(":visible")方法
简写：.mouseover(function(){})
bind()方法其他用法：
（1）为一个元素一次性绑定多个事件类型
$("div").bind("mouseover mouseout",function(){};);
（2）添加事件命名空间，便于管理
3.合成事件
hover()方法：模拟光标悬停事件
格式：hover(enter , leave);
当光标移动到元素上时，会触发指定的第一个函数，当光标移除这个元素时，会触发指定的第2个函数
在大多数浏览器中，伪类选择符可用于任何元素，在IE6中，伪类选择器仅可用于超链接，对于其他元素可使用jQuery中的hover()方法
替代事件：bind("mouseenter")和bind("mouseleave")
mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
toggle()方法：模拟鼠标的连续单击事件
格式：toggle(fn1,fn3......fnN);
1 $(function()){ 2 $("#panel").toggle(function(){ 3 $(this).next().show(); 4 },function(){ 5 $(this).next().hide(); 6 }) 7 })
补充toggle还有另一个作用：切换元素的可见状态。如果元素课件，单击后切换为隐藏。如果元素是隐藏的，单击切换后为可见
$(function()){ $("#panel").toggle(function(){ $(this).next().toggle(); },function(){ $(this).next().toggle(); }) })
4.事件冒泡
冒泡：嵌套元素相应同一个事件的执行顺序，事件按照DOM的层次结构由下向上直至顶端
事件冒泡引发的问题：
（1）事件对象：event
创建事件对象只需要为事件处理函数添加一个参数event，对元素执行事件时，事件对象就被创建了，这个对象只有事件处理函数才能访问到，事件处理函数执行完毕后，事件对象就被销毁
（2）停止事件冒泡：event.stopPropagation()方法
（3）阻止默认行为：event.preventDefault()方法
例子：表单验证不符合提交条件时阻止表单的提交（默认行为）
1 $(function(){ 2 $("#sub").bind("click",function(event){ 3 var username=$("#username").val(); 4 if(username==""){ 5 $(""#msg).html("<p>文本框内容不能为空</p>")； 6 event.preventDefault(); 7 } 8 }) 9 })
如果想同时对事件对象停止冒泡和默认行为，可在事件处理函数中返回false，即：return false
5.事件捕获
事件捕获和事件冒泡是想法的过程，事件捕获是从顶端往下开始触发
并非所有的浏览器都支持事件捕获，jQuery也不支持
6.事件对象的属性
| 属性和方法 | 作用 |
| event.type | 获取事件的类型 |
| event.preventDefault() | 阻止默认的事件行为 |
| event.stopPropagation() | 阻止事件冒泡 |
| event.target | 获取触发事件的元素 |
| event.relatedTarget | 返回当前事件涉及到的其他DOM元素 |
| event.pageX和event.pageY | 获取到光不熬相对于页面的x和y坐标 |
| event.which | 在鼠标事件中获取鼠标的左、中、右键 ;在键盘事件中获取键盘的按键 |
| event.metaKey | 在键盘事件中获取<ctrl>键 |
补充：（1）JS中的stopPropagation()方法不兼容IE浏览器
（2）在标准DOM中，mouseover和mouseout所发生的元素都可以通过event.target访问，相关元素是通过event.relatedTarget来访问的。event.relatedTarget相当于IE浏览器的event.fromElement，在mouseout中相当于IE的event.toElement。
（3）在JS中，IE用event.x和event.y；Firefox用event.pageX/event.pageY。如果页面有滚动条，还要加上滚动条的宽度和高度。
6.移除事件
（1）移除按钮元素上已有的事件：$("#btn").unbind();
格式：unbind([type],[data]);
第一个参数是事件类型，第二个参数是将要移除的函数
①如果没有参数，删除所有绑定的事件。
②有参数只删除参数类型的绑定事件。
③如果把在绑定时传递的处理函数作为第二个参数，只有特定的事件处理函数会被删除。
（2）移除<button>元素中的其中一个事件
在绑定时要给匿名函数指定一个变量
1 $(function(){ 2 $("#btn").bind("click",myFun1=function(){ 3 //代码1 4 }).bind("click",myFun1=function(){ 5 //代码2 6 }） 7 })
单独移除某个绑定事件
1 $("#del1").click(function(){ 2 $("#btn").unbind("click",myFun2); 3 })
注意：对于只需要触发一次就要立即解除绑定的情况，使用one()方法。one()方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除。即：在每个对象上，事件处理函数都只会被执行一次。one()方法的使用和bind()方法一样。