当前位置主页 > 资料库 > 前端教程 > jQuery教程-jQuery的常用事件

jQuery教程-jQuery的常用事件

2016-02-25
麦子学院

jQuery为我们提供了非常多的事件处理方法。其中有一组按事件名称命名的事件处理方法,它们是:

  • hover([over,]out):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
  • toggle([speed],[easing],[fn]):用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的click事件。
  • blur([[data],fn]):当元素失去焦点时触发blur事件。
  • change([[data],fn]):当元素的值发生改变时,会发生 change 事件。
  • click([[data],fn]):触发每一个匹配元素的click事件。
  • dblclick([[data],fn]):当双击元素时,会发生dblclick事件。
  • focus([[data],fn]):当元素获得焦点时,触发focus事件。
  • focusin([data],fn):当元素获得焦点时,触发focusin事件。
  • focusout([data],fn):当元素失去焦点时触发focusout事件。
  • keydown([[data],fn]):当键盘或按钮被按下时,发生keydown事件。
  • keypress([[data],fn]):当键盘或按钮被按下时,发生keypress事件。
  • keyup([[data],fn]):当按钮被松开时,发生keyup事件。它发生在当前获得焦点的元素上。
  • mousedown([[data],fn]):当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件。
  • mouseenter([[data],fn]):当鼠标指针穿过元素时,会发生mouseenter事件。该事件大多数时候会与mouseleave事件一起使用。
  • mouseleave([[data],fn]):当鼠标指针离开元素时,会发生mouseleave事件。该事件大多数时候会与mouseenter事件一起使用。
  • mousemove([[data],fn]):当鼠标指针在指定的元素中移动时,就会发生mousemove事件。
  • mouseout([[data],fn]):当鼠标指针从元素上移开时,发生mouseout事件。
  • mouseover([[data],fn]):当鼠标指针位于元素上方时,会发生mouseover事件。
  • mouseup([[data],fn]):当在元素上放松鼠标按钮时,会发生mouseup事件。
  • resize([[data],fn]):当调整浏览器窗口的大小时,发生resize事件。
  • scroll([[data],fn]):当用户滚动指定的元素时,会发生scroll事件。
  • select([[data],fn])textarea或文本类型的input元素中的文本被选择时,会发生select事件。
  • submit([[data],fn]):当提交表单时,会发生submit事件。
  • ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
  • unload([[data],fn]):在当用户离开页面时,会发生unload事件。

hover([over,]out)

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测,如果是则会继续保持“悬停”状态,而不触发移出事件。

参数:

  • over:鼠标移到元素上要触发的函数。
  • out:当鼠标移到元素上或移出元素时触发执行的事件函数。

例如制作表格的鼠标滑过斑马线效果:

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);                              
                            

toggle([speed],[easing],[fn])

用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的click事件。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

参数:

  • speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值:slow,normal,fast。
  • easing:可选参数。用来指定切换效果,默认是"swing",可用参数"linear"。
  • fn:在动画完成时执行的函数,每个元素执行一次。

例如下面的代码可以用于切换列表元素的可见性。

 $("li").toggle(
  function () {
    $(this).addClass("visibled");
  },
  function () {
    $(this).removeClass("visibled");
  }
);                             
                            

blur([[data],fn])

这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的。

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的blur事件中绑定的处理函数。

例如下面的代码:

<button class="btn1">按钮1</button>
<button class="btn2">按钮2</button>
<button class="btn3">按钮3</button>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  $(".btn1").blur({name:"tom"},function(event){
    alert(event.data.name);
  })
});
</script>                              
                            

上面的代码中,传入blur()函数的第一个参数是一个Json对象,这个对象可以被随后的函数接收并使用其中的数据。执行上面代码的结果为,当按钮1失去焦点时,将弹出对话框显示“tom”。

change([[data],fn])

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

该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

例如下面的代码会触发被选元素的change事件。

$(selector).change();                              
                            

click([[data],fn])

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

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

例如下面的代码会触发列表元素的点击事件。

$("li").click();                              
                            

dblclick([[data],fn])

当双击元素时,会发生dblclick事件。

当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次click。在很短的时间内发生两次click,即是一次double click 事件。提示:如果把dblclickclick事件应用于同一元素,可能会产生问题。

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

例如下面的代码会在鼠标双击时为每一个列表元素的绑定一个回调函数。

$("li").dblclick( function () { alert("Hello World!"); });                            
                            

keydown([[data],fn])

当键盘或按钮被按下时,发生keydown事件。如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

例如下面的代码可以对页面中的键盘按键做出响应。

$(window).keydown(function(event){
  switch(event.keyCode) {
    // ......
  }
});                              
                            

关于keyCode的详细详细可以参看:http://unixpapa.com/js/key.html

keypress([[data],fn])

keypress事件与keydown事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。 不过,与keydown事件不同,每插入一个字符,就会发生keypress事件。如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

例如下面的代码计算在输入域中的按键次数。

$("input").keydown(function(){  $("span").text(i+=1);});                              
                            

keyup([[data],fn])

当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

例如下面的代码当按下按键时,改变文本域的颜色。

$("input").keyup(function(){
  $("input").css("background-color","#ffaaaa");
});                              
                            

mousedown([[data],fn])

当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件。mousedownclick事件不同,mousedown事件仅需要按键被按下,而不需要松开即可发生。

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

示例代码:

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

mouseenter([[data],fn])

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

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

例如下面的代码在鼠标进入列表元素时,修改列表项的背景颜色。

$("li").mouseenter(function(){
  $(this).css("background-color","yellow");
});                            
                            

mouseleave([[data],fn])

当鼠标指针离开元素时,会发生mouseleave事件。该事件大多数时候会与mouseenter事件一起使用。

mouseout事件不同,只有在鼠标指针离开被选元素时,才会触发mouseleave事件。如果鼠标指针离开任何子元素,同样会触发mouseout事件。

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

例如当鼠标指针离开元素时,改变元素的背景色:

$("li").mouseleave(function(){
  $(this).css("background-color","#ffaaaa");
});                              
                            

mousemove([[data],fn])

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

mousemove事件处理函数会被传递一个变量——事件对象,其.clientX.clientY属性代表鼠标的坐标。

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

例如下面的代码可以获得鼠标指针在页面中的位置。

$(document).mousemove(function(e){
  $("span").text(e.pageX + ", " + e.pageY);
});                            
                            

mouseout([[data],fn])

当鼠标指针从元素上移开时,发生mouseout事件。该事件大多数时候会与mouseover事件一起使用。

mouseleave事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发mouseout事件。只有在鼠标指针离开被选元素时,才会触发mouseleave事件。

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

例如下面的代码当鼠标从元素上移开时,改变元素的背景色。

$("li").mouseout(function(){
  $(this).css("background-color","#ffaaaa");
});                         
                            

mouseover([[data],fn])

当鼠标指针位于元素上方时,会发生mouseover事件。该事件大多数时候会与mouseout事件一起使用。

mouseenter事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发mouseover事件。只有在鼠标指针穿过被选元素时,才会触发mouseenter事件。

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

例如下面的代码当鼠标指针位于元素上方时时,改变元素的背景色。

$("li").mouseover(function(){
  $(this).css("background-color","yellow");
});                        
                            

mouseup([[data],fn])

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

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

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

例如下面的代码当松开鼠标按钮时,隐藏或显示元素。

$("button").mouseup(function(){
  $("p").slideToggle();
});                       
                            

resize([[data],fn])

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

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

例如下面的代码会在每次浏览器窗口尺寸改变时都被触发。

$(window).resize(function(){
  alert("window resized!");
});                       
                            

select([[data],fn])

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

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

例如下面的代码是当文本框中文本被选中时执行的函数。

$(":text").select( function () { /* ...do something... */ } );                       
                            

select([[data],fn])

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

参数:

  • data:fn处理函数的参数或数据。
  • fn:在每一个匹配元素的keydown事件中绑定的处理函数。

例如下面的代码会阻止表单提交。

$("form").submit( function () {
  return false;
} );                       
                            
相关阅读
Previous:
上一篇:jQuery教程-jQuery事件模型
Next:
下一篇:jQuery教程-jQuery事件处理和事件委派

我要评论

返回顶部