一、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、相同事件名称、不同命名空间执行方法
网友评论