jQuery教程-jQuery的常用事件

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 事件。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。

参数：

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的详细详细可以参看：。

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 事件。 mousedown 与 click 事件不同， 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;
} );                       
                            

查看更多关于jQuery教程-jQuery的常用事件的详细内容...