jQuery - 事件

触发事件 (Event) 方法种类

区分	种类	说明
loading (加载)	load()	添加事件处理程序到 load 事件，当指定的被选元素已加载时，会发生 load 事件 该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）以及 window 对象 根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件
	ready()	在指定的 HTML 文档对象完全加载完后，会发生 ready 事件
	error()	当被选元素遇到错误时（当元素没有正确载入时），发生 error 事件 > 1.8版本之后废除
mouse (鼠标)	click()	当点击被选元素时，会发生 dblclick 事件
	dblclick()	当双击被选元素时，会发生 dblclick 事件
	mouseout()	当鼠标指针离开被选元素时，会发生 mouseout 事件
	mouseover()	当鼠标指针位于被选元素上方时，会发生 mouseover 事件
	hover()	hover()方法用于模拟光标悬停事件 当鼠标移动到被选元素上时，会触发指定的第一个函数(mouseenter) 当鼠标移出这个被选元素时，会触发指定的第二个函数(mouseleave)
	mousedown()	当鼠标指针移动到被选元素上方，并按下鼠标按键时，会发生 mousedown 事件
	mouseup()	当在被选元素上松开鼠标按钮时，会发生 mouseup 事件
	mouseenter()	当鼠标指针穿过被选元素时，会发生 mouseenter 事件
	mouseleave()	当鼠标指针离开被选元素时，会发生 mouseleave 事件
	mousemove()	当鼠标指针在指定的被选元素中移动时，会发生 mousemove 事件
	scroll()	当用户滚动指定的被选元素时，会发生 scroll 事件 scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）
focus (焦点)	focus()	当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），会发生 focus 事件 提示：该方法通常与 blur() 方法一起使用
	focusin()	当被选元素（或在其内的任意元素）获得焦点时，会发生 focusin 事件 与 focus() 方法不同的是，focusin() 方法在任意子元素获得焦点时也会触发 提示：当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点 提示：该方法通常与 focusout() 方法一起使用
	focusout()	当被选元素（或在其内的任意元素）失去焦点时，会发生 focusout 事件 与 blur() 方法不同的是，focusout() 方法在任意子元素失去焦点时也会触发 提示：该方法通常与 focusin() 方法一起使用
	blur()	当被选元素失去焦点时，会发生 blur 事件 提示：该方法常与 focus() 方法一起使用
	change()	当被选元素的值改变时发生 change 事件（仅适用于表单字段） 注意：当用于 select 元素时，change 事件会在选择某个选项时发生 当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生
keyboard (键盘)	keypress()	当键盘键被按下时，会发生 keypress 事件 在键盘上按下一个按键，并产生一个字符时发生，返回ASCII码 注意：【shift、alt、ctrl】 等键按下并不会产生字符，所以监听无效 只有按下能在屏幕上输出字符的按键时keypress事件才会触发 若一直按着某按键则会不断触发
	keydown()	当键盘键被按下时，会发生 keydown 事件 在键盘上按下某键时发生，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码
	keyup()	当键盘键被松开时，会发生 keyup 事件 用户松开某一个按键时触发，与keydown相对，返回键盘代码

#基本型
$("选择事件对象").触发事件方法(function() {
    Javascript code;
});

#eg
<button id="btn1">按键</button>
$("#btn1").click(function() {
    alert("welcome");
});

触发多个事件方法

种类	说明
on() off()	被选元素及子元素上添加一个或多个事件处理程序 自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品 该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库 注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素） 提示：如需移除事件处理程序 off()
bind() unbind()	被选元素上添加多个事件处理程序 提示：如需移除事件处理程序 unbind()
delegate() undelegate()	被选元素的子元素上添加事件处理程序 提示：如需移除事件处理程序 undelegate()
one()	只运行一次的事件然后移除 one()

#基本型
#方法一
$("选择事件对象").on("事件1 事件2 ... 事件n",
function(){
    Javascript code;
});
#方法二
$("选择事件对象").on({
    "事件1 事件2 ... 事件n" : function() {
        Javascript code;
    }
});
#方法三
$("选择事件对象").on({
    "事件1" : function() { Javascript code; },
    "事件2" : function() { Javascript code; },
    "事件3" : function() { Javascript code; },
        ...
    "事件n" : function() { Javascript code; }
});

#eg
<button id="btn1">按键</button>
#方法一
$("#btn1").on("mouseover focus", function() {
    console.log("welcome");
});
#方法二
$("#btn1").on({
    "mouseover focus" : function() {
        console.log("welcome");
    }
});
#方法三
$("#btn1").on({
    "mouseover" : function() {
        console.log("welcome");
    },
    "focus": function() {
        console.log("welcome");
    }
});

事件对象的属性种类

区分	种类	说明
鼠标事件	clientX	返回当事件被触发时鼠标指针相对于浏览器页面（客户区/当前窗口）的水平坐标 同一个元素坐标不随滑动条移动而变化
	clientY	返回当事件被触发时鼠标指针相对于浏览器页面（客户区/当前窗口）的垂直坐标 同一个元素坐标不随滑动条移动而变化
	pageX	返回当事件被触发时鼠标指针相对于页面上的的水平坐标 从页面左上角开始，即是以页面为参考点，同一个元素坐标不随滑动条移动而变化
	pageY	返回当事件被触发时鼠标指针相对于页面上的的垂直坐标 从页面左上角开始，即是以页面为参考点，同一个元素坐标不随滑动条移动而变化
	screenX	返回事件发生时鼠标指针相对于屏幕的水平坐标 不随页面滚动或浏览器移动而改变
	screenY	返回事件发生时鼠标指针相对于屏幕的垂直坐标 不随页面滚动或浏览器移动而改变
	offsetX	返回事件发生时鼠标指针相对于目标事件元素(被触发DOM)左上角的的水平坐标 (确切的说是到边框外边界的距离) 其中在IE中以内容区左上角为基准点不包括边框 如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点
	offsetY	返回事件发生时鼠标指针相对于目标事件元素(被触发DOM)左上角的的垂直坐标 (确切的说是到边框外边界的距离)， 其中在IE中以内容区左上角为基准点不包括边框 如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点
	layerX	返回事件发生时鼠标针相对于offsetParent元素左上角的的水平坐标 (确切的说是到边框外边界的距离) 包括中间所有元素的padding、margin、border及元素宽度值之和) 其中在IE中以内容区左上角为基准点不包括边框 如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点
	layerY	返回事件发生时鼠标针相对于offsetParent元素左上角的的垂直坐标 (确切的说是到边框外边界的距离) 包括中间所有元素的padding、margin、border及元素宽度值之和) 其中在IE中以内容区左上角为基准点不包括边框 如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点
	button	可返回一个整数，指示当事件被触发时哪个鼠标按键被点击（左键: 0 中间: 1 右键: 2）
键盘事件	keyCode	返回 onkeypress 事件触发的键的值的ASCII 字符的数字， 或者 onkeydown 或 onkeyup 事件的键的键盘上真实键的数字
	altKey	当事件发生时，如果【Alt】按下时，返回 true，如果不是，返回 false
	ctrlKey	当事件发生时，如果【Ctrl】按下时，返回 true，如果不是，返回 false
	shiftKey	当事件发生时，如果【Shift】按下时，返回 true，如果不是，返回 false
全部事件	target	返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口
	cancelBubble	设置或获取当前事件是否要在事件句柄中向上冒泡 默认值是 true 设置 cancelBubble = true 后, 就不会向上冒泡
	stopPropagation()	阻止事件冒泡到父元素，阻止任何父事件处理程序被执行
	preventDefault()	阻止元素发生默认的行为 当点击提交按钮时阻止对表单的提交或阻止以下 URL 的链接

注：关于offsetParent元素

1、如果当前元素的祖先元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

2、如果当前元素的祖先元素(包括当前元素)中有CSS定位（position为absolute或relative），offsetParent取最近的那个祖先元素(包括当前元素)。

总结：

1、使用pageX获取带滚动条的到页面边缘尺寸

2、使用clientX获取到浏览器可是区域的尺寸，没有滚动条，pageX == clientX

3、使用screenX获取到屏幕边缘尺寸

4、使用offsetX获取到当前元素边缘尺寸

5、使用layerX获取到offsetParent边缘尺寸