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. 冒泡的概念
body 外层div 内部span 外层div
单击内部 <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() + "这是内部div
"; $(".msg").html(text); }); $("div").bind("mouseover.com", function() { var text = $(".msg").html() + "这是外层div
"; $(".msg").html(text); }); $("div").bind("dbclick", function() { var text = $(".msg").html() + "body被点击
"; $(".msg").html(text); }); $("p").bind("click", function(){ $("div").unbind('.com'); });}); com 命名空间被删除，不在 “com” 的命名空间的 “dbclick” 事件依然有效。
3. 相同事件名称， 不同命名空间执行方法trigger("click!"): 感叹号为匹配所有不在命名空间的 click 事件。