玩转前端交互，jQuery事件深入剖析

在前端交互中，最简单直接的操作就是点击操作。jQuery提供了两个方法，一个是click()方法用于监听用户单击操作，另一个方法是dbclick()方法用于监听用户双击操作。这两个方法的用法是类似的，下面以click()事件为例，dblclick()的用法和click()的用法是类似的，在此不再赘述。

1. click()事件

click()方法用于监听用户单击元素的操作。当用户单击该元素时，与该元素绑定的事件处理函数就会被调用。例如，下面的代码监听了用户单击#myButton按钮的操作，当用户单击该按钮时，就会弹出一个警示框：

<script>
  $("#myButton").click(function() {
    alert("你点击了按钮！");
  });
</script>

2. dblclick()事件

dblclick()方法用于监听用户双击元素的操作。当用户双击该元素时，与该元素绑定的事件处理函数就会被调用。例如，下面的代码监听了用户双击#myDiv元素的操作，当用户双击该元素时，就会弹出一个警示框：

<script>
  $("#myDiv").dblclick(function() {
    alert("你双击了元素！");
  });
</script>

3. mouseenter()事件

mouseenter()方法用于监听鼠标指针进入元素的区域的操作。当鼠标指针进入该元素的区域时，与该元素绑定的事件处理函数就会被调用。例如，下面的代码监听了鼠标指针进入#myDiv元素区域的操作，当鼠标指针进入该元素的区域时，就会弹出一个警示框：

<script>
  $("#myDiv").mouseenter(function() {
    alert("鼠标指针进入元素区域！");
  });
</script>

4. mouseleave()事件

mouseleave()方法用于监听鼠标指针离开元素的区域的操作。当鼠标指针离开该元素的区域时，与该元素绑定的事件处理函数就会被调用。例如，下面的代码监听了鼠标指针离开#myDiv元素区域的操作，当鼠标指针离开该元素的区域时，就会弹出一个警示框：

<script>
  $("#myDiv").mouseleave(function() {
    alert("鼠标指针离开元素区域！");
  });
</script>

5. hover()事件

hover()方法用于同时监听鼠标指针进入和离开元素区域的操作。当鼠标指针进入该元素的区域时，与该元素绑定的第一个事件处理函数就会被调用；当鼠标指针离开该元素的区域时，与该元素绑定的第二个事件处理函数就会被调用。例如，下面的代码监听了鼠标指针进入和离开#myDiv元素区域的操作，当鼠标指针进入该元素的区域时，就会弹出一个警示框，当鼠标指针离开该元素的区域时，也会弹出一个警示框：

<script>
  $("#myDiv").hover(function() {
    alert("鼠标指针进入元素区域！");
  }, function() {
    alert("鼠标指针离开元素区域！");
  });
</script>

6. keypress()事件

keypress()方法用于监听用户按下键盘按键的操作。当用户按下键盘按键时，与该元素绑定的事件处理函数就会被调用。例如，下面的代码监听了用户按下#myInput输入框按键的操作，当用户按下键盘按键时，就会弹出一个警示框：

<script>
  $("#myInput").keypress(function() {
    alert("你按下了键盘按键！");
  });
</script>

7. keydown()事件

keydown()方法用于监听用户按下键盘按键并保持按下状态的操作。当用户按下键盘按键并保持按下状态时，与该元素绑定的事件处理函数就会被调用。例如，下面的代码监听了用户按下#myInput输入框按键并保持按下状态的操作，当用户按下键盘按键并保持按下状态时，就会弹出一个警示框：

<script>
  $("#myInput").keydown(function() {
    alert("你按下了键盘按键并保持按下状态！");
  });
</script>

8. keyup()事件

keyup()方法用于监听用户释放键盘按键的操作。当用户释放键盘按键时，与该元素绑定的事件处理函数就会被调用。例如，下面的代码监听了用户释放#myInput输入框按键的操作，当用户释放键盘按键时，就会弹出一个警示框：

<script>
  $("#myInput").keyup(function() {
    alert("你释放了键盘按键！");
  });
</script>

9. change()事件

change()方法用于监听元素的value属性发生改变的操作。当元素的value属性发生改变时，与该元素绑定的事件处理函数就会被调用。例如，下面的代码监听了#mySelect下拉列表框的value属性发生改变的操作，当下拉列表框的value属性发生改变时，就会弹出一个警示框：

<script>
  $("#mySelect").change(function() {
    alert("下拉列表框的值发生改变！");
  });
</script>

10. submit()事件

submit()方法用于监听表单提交的操作。当用户提交表单时，与该表单绑定的事件处理函数就会被调用。例如，下面的代码监听了#myForm表单提交的操作，当用户提交表单时，就会弹出一个警示框：

<script>
  $("#myForm").submit(function() {
    alert("你提交了表单！");
  });
</script>

11. focus()事件

focus()方法用于监听元素获得焦点