jQuery中的事件
1、加载DOM
$(document).ready()方法，替代传统的JavaScript中的window.load()
区别:
1、windows.onload()只可以使用一次，$(document).ready()可以使用多次。
2、windows.onload()在窗体加载完毕后触发，而$(document).ready()在DOM完全就绪的时候就可以被调用
3、简写方式$(document).ready()可以简写成$(function(){});,还可以简写成$().ready(function(){})
2、事件绑定
bind()方法可以用来绑定事件，且可以多次调用，格式为:
bind(type[ , data],fn);
第一个参数为事件类型，包括：blur、focus、load、resize、click等，也可以自定义。
第二个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象。
第三个参数用来绑定的处理函数。
$(function(){
$("#body h5.head").bind("click",function(){
$(this).next().show(); //获取$(this).next()元素
})
});
2.1 改变绑定事件的类型
$(function(){
$("#body h5.head").bind("mouseover",function(){
$(this).next().show(); //绑定mouseover事件
}).bind("mouseout",function(){
$(this).next().hide(); //绑定mouseout事件
})
});
- 等待DOM装载完毕。
- 找到#body所在元素，绑定mouseover事件
- 找到内容元素，执行事件
- 找到#body所在元素，绑定mouseout事件
- 找到内容元素，执行事件
简写绑定事件的方式
$(function(){
$("#body h5.head").mouseover(function(){
$(this).next().show(); //绑定mouseover事件
}).mouseout(function(){
$(this).next().hide(); //绑定mouseout事件
})
});
3. 事件冒泡
- 事件冒泡
- 这个概念通俗来讲，就是页面上多个元素响应了同一个事件，这些元素有可能是包含、嵌套关系，当事件发生时，会按照元素的嵌套顺序从内向外进行执行，直到顶端。
为了解决这些问题，引入以下内容：
3.1 事件对象
在程序中使用事件对象，只需要在函数
$(function(){
$("#element").bind("mouseover",function(event){
//event:事件对象
});
当点击element元素时，事件对象被创建，这个对象只有在事件处理函数才可以访问到，事件处理函数执行完毕后，事件对象就会被销毁。
3.2 停止事件冒泡
停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。jQuery提供了stopPropagation()方法来停止事件冒泡。
$(function(){
$("#element").bind("mouseover",function(event){
//event:事件对象
event.stopPropagation();//停止事件冒泡
});
3.3 阻止默认行为
网页上的元素有自己默认的行为，jQuery提供了preventDefault()方法来阻止元素的默认行为。
$(function(){
$("#submit").bind("click",function(event){
//event:事件对象
event.preventDefault();//阻止默认行为（表单提交）
});
如果同时想对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false，这是对在事件上同时调用stopPrapagation()和preventDefault()方法的一种简写形式。
3.4 事件捕获
与事件冒泡相反的两个过程，事件捕获是从最顶端往下开始触发。但是jQuery目前不支持事件捕获。
4 事件对象的属性
- event.type 获取到事件的类型
- event.preventDefault() 阻止事件的默认行为
- event.stopPropagation() 阻止事件冒泡
- event.target() 获取到触发事件的元素
- event.relatedTarget 获取到触发事件的元素
- event.pageX和event.pageY 获取到光标相对页面的x坐标和y坐标
- event.which 在鼠标点击事件中获取鼠标的左1、中2、右3键，和键盘的按键
- event.metaKey 为键盘事件中获取ctrl按键
5 移除事件
5.1 移除按钮元素上以前注册的事件
$("#submit").unbind();//删除所有绑定事件
$("#submit").unbind("click");//删除click事件
如果没有参数，则移除所有的绑定事件，若提供事件类型参数，则只删除该类型的绑定事件。
5.2 one()方法
jQuery提供的one()方法，可以为元素绑定处理函数，当函数触发一次后，立即被删除。即在每个对象上，事件处理函数只会被执行一次。
6 模拟操作
- 模拟操作
- 模拟用户操作的方式，触发类似于click类型的事件。
$("#submit").trigger("click");//模拟click事件
有时候trigger()方法执行后，会执行浏览器默认行为，例如：
$("input").trigger("focus");
//不仅会触发绑定的focus事件，也会使input本身得到焦点
若只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用另一个类似的方法triggerHandler("focus")
7 事件其他用法
7.1 绑定多个事件类型
$("input").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
});
7.2 添加事件命名空间，便于管理
$("div").bind("mouseover.plugin mouseout",function(){
$(this).toggleClass("over");
});
$("div").bind("click.plugin",function(){
$(this).toggleClass("over");
});
$("div").bind("dbclick.plugin",function(){
$(this).toggleClass("over");
});
$("button").click(){
$("div").unbind(".plugin");
});
在绑定事件类型后面添加命名空间，这在删除事件时只需要置顶命名空间即可。
7.3 相同事件名称，不同命名空间执行方法
可以为元素绑定相同的事件类型，然后以命名空间的不同按需调用。
$("div").bind("click",function(){
$(this).toggleClass("over");
});
$("div").bind("click.plugin",function(){
$(this).toggleClass("over");
});
$("button").click(){
$("div").trigger("click!");
//带！号，匹配所有不包含在命名空间中的click方法
});
$("div").bind("click.plugin",function(){
$("div").trigger("click");
//去掉！，两者都会被触发
});
