jQuery 事件

知否 發表於 2021-10-15
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>

在瀏覽器中的演示效果:

jQuery 事件

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 事件

滑鼠事件

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元素,執行第二個函式!");
});

我們可以在瀏覽器中看一下演示效果:
jQuery 事件

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>

在瀏覽器中的演示效果:

jQuery 事件