第八章 事件的处理

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!"); } );

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180712G0UWDG00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励