本节咱们学习 jQuery 中的事件的应用，jQuery 是专门为响应 HTML 页面中的事件而设计的。咱们在应用时，须要遵循以下准则：

  • 把所有 jQuery 代码置于事件处理函数中。
  • 把所有事件处理函数置于文档就绪事件处理器中。
  • 把 jQuery 代码置于独自的 .js 文件中。
  • 如果存在名称抵触，则重命名 jQuery 库。

什么是事件

首先咱们要晓得什么是事件，页面对不同访问者的响应叫做事件，例如点击某个按钮，抉择单选框或复选框，滑动鼠标等，这些都能够称为事件。

jQuery罕用事件

在 jQuery 中，大多数 DOM 事件都有一个相应的 jQuery 办法。例如咱们后面提到过的点击事件的对应的办法为 click() 办法。

click点击事件

当咱们点击元素时，会产生 click 点击事件，这须要用到 click() 办法。

示例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script>  $(function(){    $("button").click(function(){      alert("hello, xkd!");    });  });</script></head><body>  <div>    <button>点击按钮</button>  </div></body></html>

在浏览器中的演示成果：

dblclick双击事件

当咱们双击元素时，会触发 dblclick 双击事件。触发双击事件须要用到 dblclick() 办法。

留神 dblclick 事件也会产生 click 事件，所有如果这两个事件都被利用于同一个元素，则会产生问题。

示例：

例如双击 p 元素并暗藏这个元素：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script>  $(function(){    $("p").dblclick(function(){      $(this).hide();    });  });</script></head><body>  <div>    <p>双击暗藏此元素</p>  </div></body></html>

在浏览器的演示成果：

鼠标事件

jQuery 的鼠标有四个相干的事件，包含鼠标指针进入、来到、按下、开释：

  • 当鼠标指针穿过（进入）被选元素时，能够通过 mouseenter() 办法触发 mouseenter 事件。
  • 当鼠标指针来到 HTML 元素时，能够通过 mouseleave() 办法触发 mouseleave 事件。
  • 当鼠标指针挪动到元素上方，并按下鼠标按键时，能够通过 mousedown() 办法触发 mousedown 事件。
  • 当在元素上松开鼠标按钮时，能够通过 mouseup() 办法触发 mouseup 事件。
示例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script>  $(function(){    $(".one").mouseenter(function(){      alert("mouseenter事件");    });    $(".two").mouseleave(function(){      alert("mouseleave事件");    });    $(".three").mousedown(function(){      alert("mousedown事件");    });    $(".four").mouseup(function(){      alert("mouseup事件");    });  });</script></head><body>  <div>    <p class="one">mouseenter事件，鼠标指针挪动到元素上，弹出弹出层</p>    <p class="two">mouseleave事件，鼠标指针来到元素上，弹出弹出层</p>    <p class="three">mousedown事件，在元素上按下鼠标，弹出弹出层</p>    <p class="four">mouseup事件，在元素上松开鼠标，弹出弹出层</p>  </div></body></html>

hover()办法

hover() 办法用于在鼠标指针悬停在被选元素上时要运行的两个函数。即 mouseenter() 和 mouseleave() 办法。

示例：

hover() 中第一个函数在鼠标进入 HTML 元素时执行，第二个函数在鼠标来到 HTML 元素时执行：

$(function(){    $("p").hover(      function(){        console.log("鼠标进入HTML元素，执行第一个函数!");      },      function(){        console.log("鼠标来到HTML元素，执行第二个函数!");      }    );});

上述代码相当于：

$("p").mouseenter(function(){      console.log("鼠标进入HTML元素，执行第一个函数!");}).mouseleave(function(){      console.log("鼠标来到HTML元素，执行第二个函数!");});

咱们能够在浏览器中看一下演示成果：

focus()和blur()办法

当表单元素取得焦点时，也能够说是通过鼠标点击选中元素或通过 tab 键定位到元素时，会产生 focus 事件。能够通过 focus() 办法来触发 focus 事件。

focus() 办法通常与 blur() 办法一起应用，当表单元素失去焦点时产生 blur 事件。 blur 事件是通过 blur() 来触发的。

示例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script>  $(function(){      $("input").focus(function(){        console.log("元素取得焦点");      });      $("input").blur(function(){        console.log("元素失去焦点");      });       });</script></head><body>  <div>    用户名：<input type="text">  </div></body></html>

在浏览器中的演示成果：