犀牛——第19章 JQuery类库 19.4使用jQuery处理事件

来源：互联网发布：聚翔网络编辑：程序博客网时间：2024/05/01 20:37

19.4.1事件处理程序的简单注册

1.blur() 当元素失去焦点时发生 blur 事件。
2.focus() 当元素获得焦点时触发focus事件
3,change()

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

该事件仅适用于文本域（text field），以及 textarea 和 select 元素。

change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。

注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

4.click() ,dbclick()

单击、双击

5.error()

当元素遇到错误（没有正确载入）时，发生 error 事件。

error() 方法触发 error 事件，或规定当发生 error 事件时运行的函数。

6.focusin(),focusout()

当元素（或在其内的任意元素）获得焦点时发生 focusin 事件。

当在元素或在其内的任意元素上发生 focus 事件时，focusin() 方法添加要运行的函数。

与 focus() 方法不同的是，focusin() 方法在任意子元素获得焦点时也会触发。

提示：当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

提示：该方法通常与 focusout() 方法一起使用。

以上代码：

<html><head><script src="jquery-2.0.2.min.js"></script><script>jQuery(function(){   $("input").focus(function(){      $("input").css("background-color","#FF0000");   });   $("input").blur(function(){      $("input").css("background-color","#D6D6FF");   });});jQuery(function(){   $("textarea").change(function(){      $("textarea").css("background-color","#ff0000");   });});jQuery(function(){   $(".field").change(function(){      alert($(".field").val());   });});$(document).ready(function(){  $("button").dblclick(function(){    $("p").slideToggle();  });});jQuery(function(){   $("img").error(function(){      $("img").replaceWith("<p><b>图片未加载！</b></p>");   });});$(document).ready(function(){  $("div").focusin(function(){    $(this).css("background-color","#FFFFCC");  });  $("div").focusout(function(){    $(this).css("background-color","#FFFFFF");  });});</script></head><body><!--blur()当焦点失去时触发，focus（）焦点失去时触发-->-----------------focus()-------blur()----------<br/><input type="text" /><br />-------------change()-------------------------<br /><textarea rows="3" cols="100"></textarea><br /><p>Car:<select class="field" name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select></p><br />--------------click()----dblclick()--------------<br /><button>dblclick()</button><br/>--------------------error()----------------<br/><img src="asdfa.png"/><br/>-----------------focusin()---focusout()---------<br/><div style="border: 1px solid black;padding:10px;">First name: <input type="text"><br>Last name: <input type="text"></div></body></html>

7，keydown(),keyup(),keypress()

完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。

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

keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。

注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。

不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。

keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。

注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script src="jquery-2.0.2.min.js"></script><script>jQuery(function(){   $("input").keydown(function(){       $("input").css("background-color","#FFFFCC");   });   $("input").keyup(function(){       $("input").css("background-color","#D6D6FF");   });});i=0;$(document).ready(function(){  $("input").keypress(function(){    $("span").text(i+=1);  });});</script></head><body>----------keydown()--------keyup()-----------<br/><input type="text" /><br />-----------keypress()----------------<br />Enter your name: <input type="text" /><p>Keypresses:<span>0</span></p></body></html>

8.load()

当指定的元素（及子元素）已加载时，会发生 load() 事件。

该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）。

根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。

9,mouse方法

mousedown()方法

定义和用法

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

与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数。

mouseup()方法

定义和用法

当在元素上放松鼠标按钮时，会发生 mouseup 事件。

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

mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数。

代码：

<html><head><script src="jquery-1.9.1.js"></script><script>jQuery(function(){  $("#mousedown").mousedown(function(){    $("p").slideToggle();  });});jQuery(function(){   $("#mouseup").mouseup(function(){      $("p").slideToggle();   });});</script></head><body><p>这是一个段落。</p><button id="mousedown">mousedown</button><button id="mouseup">mouseup</button></body></html>

mouseenter()和mouserelease()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

当鼠标指针离开元素时，会发生 mouseleave 事件。

<html><head><script src="jquery-1.9.1.js"></script><script>jQuery(function(){  $("p").mouseenter(function(){    $("p").css("background-color","yellow");  });  $("p").mouseleave(function(){    $("p").css("background-color","#E9E9E4");  });});</script></head><body><p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p></body></html>

mousemove()事件

定义和用法

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

mousemove() 方法触发 mousemove 事件，或规定当发生 mousemove 事件时运行的函数。

注意：用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。

<html><head><script src="jquery-1.9.1.js"></script><script>jQuery(function(){ $(document).mousemove(function(a){    $("span").text(a.pageX + ", " + a.pageY);  });});</script></head><body><p>鼠标位于坐标： <span></span>.</p></body></html>

mouseover()和mouserout()

当鼠标指针位于元素上方时，会发生 mouseover 事件。

当鼠标指针从元素上移开时，发生 mouseout 事件。

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("p").mouseover(function(){    $("p").css("background-color","yellow");  });  $("p").mouseout(function(){    $("p").css("background-color","#E9E9E4");  });});</script></head><body><p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p></body></html>

10.resize()

当调整浏览器窗口的大小时，发生 resize 事件。

html><head><script src="jquery-1.9.1.js"></script><script>x=0;$(document).ready(function(){$(window).resize(function() {  $("span").text(x+=1);});});</script></head><body><p>窗口大小被调整过 <span>0</span> 次。</p><p>请试着重新调整浏览器窗口的大小。</p></body></html>

<span style="font-family: 微软雅黑; font-size: 26px; background-color: rgb(249, 249, 249);"></span>

11.scroll() 方法

当用户滚动指定的元素时，会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

12.select()

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

13.submit()

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

<html><head><script src="jquery-1.9.1.js"></script><script>jQuery(function(){   $("form").submit();});</script></head><body><form action="http://www.baidu.com" name="form"><input type="submit" name="submit"/></form></body></html>

14.unload()

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

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

点击某个离开页面的链接
在地址栏中键入了新的 URL
使用前进或后退按钮
关闭浏览器
重新加载页面

unload() 方法将事件处理程序绑定到 unload 事件。

unload() 方法只应用于 window 对象。

19.4.2 jQuery事件处理程序

jQuery事件处理程序函数的返回值始终有意义，如果处理程序返回false，与该事件相关联的默认行为，以及该事件接下来的冒泡都会被取消。

当事件处理程序返回一个值(非undefined值)时，jQuery会将该值存储在Event对象的result属性中，该属性可以被后继事件处理程序访问。

19.4.3 jQuery事件对象

jQuery通过定义自己的Event对象来隐藏浏览器之间的实现差异。当一个jQuery事件处理程序被调用时，总会传入一个jQuery时间对象作为其第一个参数。

19.4.4 事件处理程序的高级注册

bind()需要一个时间类型字符串作为第一个参数，以及一个事件处理程序函数作为其第二个参数。事件注册的简单方法使用该形式的bind()。

调用$('p').click(f)等价于$('p').bind('click',f);

调用bind()时还可以带有三个参数。在这种情况下，事件类型是第一个参数，处理程序函数是第三个参数。在这两个参数中间可以传入任何值，jQuery会在调用程序前，将指定的值设置为Event对象的data属性。

如果第一个参数是由空格分隔的事件类型列表，则处理程序函数会为每一个命名的事件类型注册。

例如：调用$('a').hover(f)等同于：$('a').bind("mouseenter mouseleave",f);

第一个参数可以是对象，该对象把事件名映射到处理程序函数。

再次使用hover()方法来举例，调用$('a').hober(f,g)等价于$('a').bind({mouseenter:f,mouseleave:g});

调用one()方法就和bind()一样，二者的工作原理也类似，除了再调用事件处理程序之后会自动注销它。使用one()注册的事件处理器永远只会触发一次。

19.4.5 注销事件处理程序

用bind()（或任何更简单的时间注册方法）注册时间处理程序后，可以使用unbind()来注销它，以避免在将来的事件中触发它。

不带参数时，unbind()会撤销jQuery对象中所有元素的（所有事件类型的）所有事件处理程序：

$('*').unbind(); //从所有元素中移除所有jQuery事件处理程序

//从所有<a>元素中取消绑定所有mouseover和mouseout处理程序

$('a').unbind("mouseover mouseout");

第一个参数是事件类型字符串，第二个参数是处理程序函数：

$('#mybutton').unbind('click',myClickHandler);

可以传递单一对象参数给unbind()。

$('a').unbind({

mouseover:mouseoverHandler,

mouseover:mouseoutHandler

});

19.4.6 触发事件

事件方法在带有一个参数时会注册事件处理程序，不带参数调用时则会触发事件处理程序。

$("#my_form").submit(); //就和用户单击提交按钮一样

调用trigger()时会传入事件类型字符串作为第一个参数，trigger()会在jQuery对象中的所有元素上触发为该类型事件注册的所有处理程序。

上面的submit()调用等价于：$("#my_form").trigger("submit");

除了给trigger()传入事件类型字符串作为第一个参数，还可以传入Event对象(或任何有type属性的对象)。

//button1的单击处理程序触发button2上的相同事件

$('#button1').click(function(e){$('#button2').trigger(e);});

//触发事件时，添加额外的属性给事件对象

$('#button1').trigger({type:'click',synthetic:true});

//该处理程序检测额外属性来区分是真实事件还是虚假事件

$('#button1').click(function(e){if(e.synthetic){...};});

在手动触发事件时，给trigger()传入第二个参数。给trigger（）传入的第二个参数会成为每个触发的事件处理程序的第二个参数。如果传入数组作为第二个参数，数组的每一项会作为独立参数传递给触发的处理程序：

$('#button1').trigger("click",true); //传入单一额外参数

$('#button1').trigger("click",[x,y,z]); //传入三个额外参数

19.4.7 自定义事件

使用bind()可以注册这种“自定义事件”的处理程序，使用trigger()可以调用这些处理程序。

19.4.8 实时事件

0 0

犀牛——第19章 JQuery类库 19.4使用jQuery处理事件

19.4.1事件处理程序的简单注册

1.blur() 当元素失去焦点时发生 blur 事件。2.focus() 当元素获得焦点时触发focus事件3,change()

4.click() ,dbclick()

5.error()

6.focusin(),focusout()

7，keydown(),keyup(),keypress()

8.load()

9,mouse方法

mousedown()方法

定义和用法

mouseup()方法

定义和用法

mouseenter()和mouserelease()

mousemove()事件

定义和用法

mouseover()和mouserout()

10.resize()

11.scroll() 方法

12.select()

13.submit()

14.unload()

19.4.2 jQuery事件处理程序

19.4.3 jQuery事件对象

19.4.4 事件处理程序的高级注册

19.4.7 自定义事件

19.4.8 实时事件

1.blur() 当元素失去焦点时发生 blur 事件。
2.focus() 当元素获得焦点时触发focus事件
3,change()