第八章 事件的处理

8.1页面载入

1.ready(fn)

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

在DOM加载完成时运行的代码，可以这样写：

jQuery代码:

$(document).ready(function(){

//在这里写你的代码...

});

使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。

jQuery代码:

$(function($){

//你可以在这里继续使用$作为别名...

});

8.2页面处理

1.on(eve,[sel],[data],fn)1.7+

在选择元素上绑定一个或多个事件的事件处理函数。

$("p").on("click",function(){

alert($(this).text() );

});

2.off(eve,[sel],[fn])1.7+

在选择元素上移除一个或多个事件的事件处理函数。off() 方法移除用.on()绑定的事件处理程序

$("p").off()

3.bind(type,[data],fn)

为每个匹配元素的特定事件绑定事件处理函数。

当每个段落被点击的时候，弹出其文本。

$("p").bind("click",function(){

alert( $(this).text() );

});

4.one(type,[data],fn)

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

当所有段落被第一次点击的时候，显示所有其文本。

$("p").one("click",function(){

alert( $(this).text() );

});

5.trigger(type,[data])

在每一个匹配的元素上触发某类事件。这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。

提交第一个表单，但不用submit()。$("form:first").trigger("submit");

6.triggerHandler(type, [data])

这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。

7.unbind(type,[data|fn])

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

把所有段落的所有事件取消绑定。$("p").unbind()。

8.3事件委派

1.delegate(s,[t],[d],fn)

指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

当点击鼠标时，隐藏或显示 p 元素：

$("div").delegate("button","click",function(){

$("p").slideToggle();

});

2.undelegate([s,[t],fn])

删除由 delegate() 方法添加的一个或多个事件处理程序。

从p元素删除由 delegate() 方法添加的所有事件处理器：$("p").undelegate();

8.4事件

1.blur([[data],fn])

当元素失去焦点时触发 blur 事件。触发所有段落的blur事件。$("p").blur();

2.change([[data],fn])

当元素的值发生改变时，会发生 change 事件。触发被选元素的change事件。

$(selector).change();

3.click([[data],fn])

触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。

触发页面内所有段落的点击事件

$("p").click();

4.dblclick([[data],fn])

当双击元素时，会发生 dblclick 事件。$("p").dblclick(function () { alert("Hello World!"); });

5.error([[data],fn])

概述当元素遇到错误（没有正确载入）时，发生 error 事件。这个函数会调用所有绑定到error事件上的函数，包括在对应元素上的浏览器默认行为。

隐藏JavaScript错误：

$(window).error(function(){

return true;

});

6.focus([[data],fn])

当元素获得焦点时，触发focus事件。

当页面加载后将id为“login”的元素设置焦点

$(document).ready(function(){

$("#login").focus();

});

7.focusin([data],fn)

当元素获得焦点时，触发 focusin 事件。

获得焦点后触发动画

$("p").focusin(function(){

$(this).find("span").css('display','inline').fadeOut(1000);

});

8.focusout([data],fn)

当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

$("p").focusout(function(){

$(this).find("span").css('display','inline').fadeOut(1000);

});

9.keydown([[data],fn])

当键盘或按钮被按下时，发生 keydown 事件。

$(window).keydown(function(event){

switch(event.keyCode) {

// ...

//不同的按键可以做不同的事情

//不同的浏览器的keycode不同

//更多详细信息: http://unixpapa.com/js/key.html

//常用keyCode： 空格 32 Enter 13 ESC 27

}

});

10.keypress([[data],fn])

当键盘或按钮被按下时，发生 keypress 事件。

11.keyup([[data],fn])

当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。

当按下按键时，改变文本域的颜色：

$("input").keyup(function(){

$("input").css("background-color","#D6D6FF");

});

12.mousedown([[data],fn])

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

当按下鼠标按钮时，隐藏或显示元素：

jQuery代码:

$("button").mousedown(function(){

$("p").slideToggle();

});

13.mouseenter([[data],fn])

当鼠标指针进入（穿过）元素时，改变元素的背景色：

$("p").mouseenter(function(){

$("p").css("background-color","yellow");

});

14.mouseleave([[data],fn])

当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

当鼠标指针离开元素时，改变元素的背景色：：

$("p").mouseleave(function(){

$("p").css("background-color","#E9E9E4");

});

15.mousemove([[data],fn])

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

获得鼠标指针在页面中的位置：

$(document).mousemove(function(e){

$("span").text(e.pageX + "," + e.pageY);

});

16.mouseout([[data],fn])

当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

当鼠标从元素上移开时，改变元素的背景色：

$("p").mouseout(function(){

$("p").css("background-color","#E9E9E4");

});

17.mouseover([[data],fn])

当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

当鼠标指针位于元素上方时时，改变元素的背景色：

$("p").mouseover(function(){

$("p").css("background-color","yellow");

});

18.mouseup([[data],fn])

当在元素上放松鼠标按钮时，会发生 mouseup 事件。与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

当松开鼠标按钮时，隐藏或显示元素：

$("button").mouseup(function(){

$("p").slideToggle();

});

19.resize([[data],fn])

当调整浏览器窗口的大小时，发生 resize 事件。让人每次改变页面窗口的大小时很郁闷的方法:

$(window).resize(function(){

alert("Stop it!");

});

20.scroll([[data],fn])

当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

当页面滚动条变化时，执行的函数:

$(window).scroll(function() { /* ...do something... */ } );

21.select([[data],fn])

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

触发所有input元素的select事件:

$("input").select();

22.submit([[data],fn])

当提交表单时，会发生 submit 事件。该事件只适用于表单元素。

提交本页的第一个表单:

$("form:first").submit();

23.unload([[data],fn])

在当用户离开页面时，会发生 unload 事件。

具体来说，当发生以下情况时，会发出unload 事件：

•点击某个离开页面的链接

•在地址栏中键入了新的 URL

•使用前进或后退按钮

•关闭浏览器

•重新加载页面

页面卸载的时候弹出一个警告框:

$(window).unload( function() { alert("Bye now!"); } );