4.1 jQuery 中的事件
4.1.1 加载 DOM
1. 执行时机
$(document).ready(function(){}): DOM 完全就绪即执行。
window.onload = function(){} 等价于 $(window).load(function(){}): 所有关联文件加载完才执行。
2. 多次使用
3. 简写方式
$(function(){}) 或 $().ready(function(){})
4.1.2 事件绑定
bind(type [, data] , fn):
type 为事件类型， 包括：blur、focus、load、resize、scroll、unload、click、dbclick、mouse[down, up, move, over, out, enter, leave]、change、select、submit、key[down, press, up]、error。
data 为可选参数， 作为 event.data 属性值传递给事件对象的额外数据对象。
fn 为绑定的处理函数。3. 多次使用 bind 函数可绑定多个不同事件
4. 简写绑定事件
$(选择器).mouseover(function(){
// body...
}).mouseout(function(){
// body...
});
4.1.3 合成事件
1. hover()方法
hover(enter, leave): 模拟光标悬停事件， 光标移到元素上方时触发 enter 事件， 光标离开时触发 leave 事件。
2. toggle()方法
toggle(fn1, fn2, ...fnN): 模拟鼠标连续点击事件， 点击第1次触发第一个事件， 点击第2次触发第二个事件。随后的点击会重复循环这 N 个事件。
4.1.4 事件冒泡
1. 冒泡的概念
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="../jquery-1.8.3.js"></script>
</head>
<body>body
<div id="content">外层div
<span>
内部span
</span>外层div
</div>
<div class="msg">
</div>
</body>
<script>
$(function() {
$("span").bind("click", function() {
var text = $(".msg").html() + "<p>这是内部span</p>";
$(".msg").html(text);
});
$("#content").bind("click", function() {
var text = $(".msg").html() + "<p>这是外层div</p>";
$(".msg").html(text);
});
$("body").bind("click", function() {
var text = $(".msg").html() + "<p>body被点击</p>";
$(".msg").html(text);
});
});
</script>
</html>
单击内部 <span> 元素，触发 <span> 元素的 click 事件， 接着触发 div 的 click 事件， 最后触发 body 的 click 事件。
元素的 click 事件会按照如下顺序 “冒泡”：
（1） <span>
（2） <div>
（3） <body>
2. 事件冒泡引发的问题
事件对象
$(选择器).bind("click", function(event){ //event: 事件对象
//...
});停止事件冒泡
$(选择器).bind("click", function(event){ //event: 事件对象
//...
event.stopPropagation(); // 停止事件冒泡
});阻止默认行为
$(选择器).bind("click", function(event){ //event: 事件对象
//...
event.preventDefault(); // 阻止默认行为
});事件捕获
事件捕获是从最顶端往下开始触发。
由冒泡的例子， 元素的 click 事件会按照以下顺序捕获。
（1） <body>
（2） <div>
（3） <span>
事件捕获需要用原生的 javascript 。
4.1.5 事件对象的属性
（1） event.type
作用：获取事件类型。
（2） event.preventDefault()
（3） event.stopPropagation()
（4） event.target
作用：获取到触发事件的元素。
（5） event.relatedTarget
标准 DOM 中， mouseover 和 mouseout 所发生的元素可以通过event.target 来访问， 相关元素是通过 event.relatedTarget 来访问的。
（6） event.pageX 和 event.pageY
作用： 获取光标相对于页面的 x 坐标和 y 坐标。
（7） event.which
作用：在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取到键盘的按键。
$("a").mousedown(function(event){
alert(event.which);
});
说明：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。（8）event.metaKey
作用：键盘事件中获取 <ctrl> 按键。
4.1.6 移除事件
unbind([type], [data]):
（1） 没有参数， 删除所有绑定事件；
（2） 只有事件类型作为参数， 删除该类型的绑定事件；
（3） 绑定时传递处理函数作为第二个参数， 则只有这个特定的事件处理函数会被删除。one(type, [data], fn):
在每个对象上， 处理函数只会被触发一次， 语法与 bind 相同。4.1.7 模拟操作
trigger(type, [data]):
第一个参数是要触发的事件类型， 可以是自定义的点击事件， 第二个参数为传递给处理函数的附加数据，以数组方式传递。$(".content").bind("myClick", function(event, param1, param2){
alert(param1 + param2);
});
$(".content").trigger("myClick", ["参数一", "参数二"]);执行默认操作
trigger() 方法触发事件后， 会执行浏览器默认操作。
解决办法
triggerHandler() 方法， 不执行浏览器默认操作。
4.1.8 其他用法
1. 绑定多个事件类型
2. 添加事件命名空间， 便于管理。
$(function() {
$("div").bind("click.com", function() {
var text = $(".msg").html() + "<p>这是内部div</p>";
$(".msg").html(text);
});
$("div").bind("mouseover.com", function() {
var text = $(".msg").html() + "<p>这是外层div</p>";
$(".msg").html(text);
});
$("div").bind("dbclick", function() {
var text = $(".msg").html() + "<p>body被点击</p>";
$(".msg").html(text);
});
$("p").bind("click", function(){
$("div").unbind('.com');
});
});com 命名空间被删除，不在 “com” 的命名空间的 “dbclick” 事件依然有效。
3. 相同事件名称， 不同命名空间执行方法
trigger("click!"): 感叹号为匹配所有不在命名空间的 click 事件。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。