jQuery事件

1.什么是事件

事件处理程序指的是当HTML中发生某些事件时调用的方法。就是触发事件。

2.常用事件

（1）click()事件：

click()方法是当按钮被点击时（触发点击事件）调用的一个函数。这个函数在用户点击HTML元素时执行。

例如：

  当点击事件触发时，会隐藏p标签里的内容。

 

$("p").click(function(){
  $(this).hide();
});

 

（2）dblclick()事件：

 

当双击元素时，会发生dbclick()事件。

例如：

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

 

$("p").dblclick(function(){
  $(this).hide();
});

 

 （3）mouseenter()事件：

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

例如：

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

 

$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});

 

 

（4）mouseleave()事件：

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

例如：

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

$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});

 

（ 5）mousedown()事件：

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

例如：

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

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
}); 

 

（6）mouseup()事件：

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

例如：

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

$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});

  

 

（7）hover()事件：

hover()方法用于模拟光标悬停事件。

例如：

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

 

（8）focus()事件：

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

例如：

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

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

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

 

（9）blur()事件：

当元素失去焦点时，发生 blur 事件。

例如：

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

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});