jQuery事件机制

一,jquery事件机制
1,事件绑定
总结:
.click(function(){}) dom中又on,这里将on去掉,直接点
.bind('click',fun) 绑定
.unbind() 解绑事件
delegate() 绑定
undelegate()解绑 jq1.4之后才出现的方法
live()绑定
die() 解绑 qj1.4之前不常用,现在不建议使用
on()  绑定事件
off() 解绑
jq1.7之后出现的
one() 一次性事件
1) bind()
未匹配的每一个元素绑定一个或多个事件处理函数
语法:bind([type],[data],fn)//不能给未来元素添加事件
type:事件类型 event.type
data: 事件参数 event.data 获取, 可以是js的任意数据类型
fn: 事件处理函数 一个或多个
bind可以自定义事件,常与trigger配合使用
trigger是一个事件触发器,用于触发自定义事件或者系统事件
unbind()移出bind绑定的事件
解绑的函数必须和绑定的函数是同一个函数
2)live()
将事件添加到当前元素以及未来元素上
语法: live([type],fn)
jq.4之前常用,之后基本不用
die(type,fn) 针对live解绑事件
3) delegate()
将事件添加到当前以及未来元素上
语法: $(selector).delegate(selector2,[type],[data],fn)
selector2:是一个选择器,选择的是selector1的儿子
jquery1.4之后出现的方法
undelegate 删除delegate添加的事件
delegate与live的区别:
d将事件添加到指定元素,分配给子元素,但live将事件绑定到document上分配给子元素
$('span').live('click',fu) == $(document).delehate('span','click',fn)
效果完全一样,但是执行速度不一样
4)on()
将事件绑定到当前以及未来元素上
语法:
$(selectior1).on([type],[selector2],[data],fn)
jq1.7以后引入的事件绑定机制
off()是on的反向操作，能够解除on添加的统一元素的同一个事件处理函数
$('div').off('click',handler);
on和off存在的意义:
①为了统一接口
②提高性能,提升编程效率
今后在编程中不在使用bind,live,delegate,只使用on即可
5)one()
为匹配的元素绑定一次性事件
语法：
$('div').one([type],[data],fun);
当使用one添加事件时每个元素只能运行一次事件处理函数
执行完毕将会被移出
6)合成事件hover()
语法:
$('div').hover(fn1,fn2);
当鼠标放在元素上执行fn1,鼠标移开执行fn2
7)合成事件toggle()
jq1.9以后的版本被废弃了
语法：
toggle(fn1,fn2,fn3...fnn)
匹配元素的轮流点击事件，第一次点击执行fn1，第二次点击执行fn2，一次类推，最后一个执行完回来执行第一个了
2,事件对象
1)DOM事件对象与jquery事件对象对比在jquery2.0之前jquery中50%的代码是做兼容的
dom.onclick = function(event){
var e = event||window.event;
}
$('div').click(function(event){
//这里的event直接使用
})
2)常用事件对象方法
组织冒泡：event.stopPropagation()
阻止默认: event.preventDefault()
事件类型：e.type
事件参数：e.data
事件源: e.target
坐标：e.pageX|pageY
e.clientX|Y
鼠标事件离开或进入dom元素：e.relatedTarget
事件触发事件戳:e.timeStamp 页面上一次刷新时间到事件触发事件差值
3,jquery与dom对象的转换
jquery其实就是对dom的一个封装可以通过数组的取值方式从jquery对象中获取dom对象
$('div'[0]) 获取匹配到的div中的第一个dom对象
jquery提供一个专门转换的方法：
$('div').get(0).style
dom对象转为jquery对象：
var dom = document.getElementById('id');
$(dom).css()
$(this).css()
$(document).css()
$(window).css()