jQuery 事件

小陳的筆記發表於2022-07-21
jQuery事件

本節我們學習 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>

在瀏覽器中的演示效果：

相關文章