jQuery学习总结之事件篇

一、DOM的加载

在javascript中，我们一般是使用window.onload方法，在页面加载完毕后，浏览器会通过javascript为DOM元素添加事件。但是在jQuery中，使用的是&(document).ready()的方法，接下来我就来区分一下这两个方法。

1、执行时机

• window.onload方法是在网页中所有的元素完全加载到浏览器后才执行，即js此时才可以访问网页中的任何元素。
• 而&(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用，即只要DOM就绪就可以操作，不用等到网页中的所有关联文件
• 由此引申了一个问题，如果我的事件需要HTML下载完毕才能执行，这个时候就会出现错误。所以解决的办法是，使用jQuery中另一个关于页面加载的方法——load()方法。

$(window).load(function(){})
//绑定给window对象，则会在所有内容加载完毕后触发，
//如果绑定在元素上，则会在元素的内容加载完毕后触发。

2、多次使用

window.onload事件只能保存对一个函数的引用，而&(document).ready()方法可以多次调用，并且行为会根据注册的顺序依次执行。

3、简写方式

&(document).ready()可以简写为:

$(function(){})

二、事件绑定

在文档加载完毕之后，就要为元素绑定事件来完成某些操作，则可以使用bind()方法来匹配元素进行特定事件的绑定，bind()方法的调用格式为：

bind(type[,data],fn);

bind()方法与ready()方法一样，可以多次调用

$(function(){
 $(".head").bind("mouseover",function(){}).bind("mouseout",function(){})
})

简写绑定事件

$(function(){
 $(".head").click(function(){}).mouseover(function(){}).mouseout(function(){});
})

三、合成事件

jQuery中有两个合成事件——hover()方法和toggle()方法，类似前面提过的ready()方法，hover()和toggle()方法都属于jQuery自定义的方法

1、hover()方法

hover(enter,leave);

hover()方法用于模拟光标悬停事件。当光标移动到元素上，会触发第一个函数，当光标移出这个元素，会触发第二个函数。

• 需要注意的是，hover()方法准确来说是替代jQuery中的bind("mouseenter")和bind("mouseleave")，而不是bind("mouseover")和bind("mouseout")，所以需要触发hover()方法的第2个函数时，需要用trigger("mouseleave")来触发。

2、toggle()方法

toggle(fn1,fn2,fn3);

toggle()方法用于模拟鼠标连续单击事件

四、事件冒泡

在页面上可以有多个事件，也可以多个元素响应同一个事件，当触发了最里层的元素事件，就会像冒泡一样，逐级向上响应对应的同一个事件，这就叫做事件冒泡。

由此引发一个问题：我只想触发最里层的元素事件，不想触发上级的事件，换句话说，就是不希望出现事件冒泡的现象。

• 1、添加事件对象event，这样，当单击"element"元素时，事件对象就被创建了。这个事件对象只有事件处理函数能访问到。事件处理函数执行完毕后，事件对象就被销毁。
• 2、停止事件冒泡，在jQuery中可以使用stopPropagation()方法来停止事件冒泡。
• 3、阻止默认行为，在jQuery中可以使用preventDefault()方法来阻止元素的默认行为。
• 4、事件捕获，是和事件冒泡的过程相反，从最外层往里层触发。

五、事件对象的属性

(1) event.type 获取到事件的类型
(2) event.target 获取触发事件的元素
(3) event.pageX 和 event.pageY 获取到光标相对于页面的x坐标和y坐标
(4) event.which 获取鼠标点击事件中鼠标的左、右、中键

1 = 鼠标左键；2 = 鼠标中键；3 = 鼠标右键

六、移除事件

1、移除按钮元素上以前注册的事件
使用unbind([type],[data])方法

• 如果没有参数，则删除所有绑定的事件。
• 如果提供了事件类型作为参数，则只删除该类型的绑定事件。
• 如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。

2、移除<button>元素的其中一个事件
首先需要为这些匿名处理函数指定一个变量
然后用unbind()方法传入第2个参数进行单独删除

3、one()方法结构与bind()类似，但是这个方法为<button>元素绑定单击事件后，只在用户第1次单击按钮时，处理函数才执行，之后的单击没有效果。

七、模拟操作

1、常用模拟
在jQuery中可以使用trigger()方法完成模拟操作，例如，

$("#btn").trigger("click");
$("#btn").click();//效果一样

当页面装载完毕后，就会立刻执行按钮上绑定的点击事件。
2、触发自定义事件
3、传递数据

$("#btn").bind("myClick",function(event,message1,message2){
   $("#test").append("<p>"+message1+message2+"</p>");
});
$("#btn").trigger("myClick",["我的自定义","事件"]);

八、其他用法

1、绑定多个事件类型

$("div").bind("mouseover mouseout",function(){
   $(this).toggleClass("over");
});

2、添加事件命名空间、便于管理
3、相同事件名称、不同命名空间执行方法