分享jQuery的3種常見(jiàn)事件監(jiān)聽(tīng)方式

更新時(shí)間：2022年03月20日 11:43:29 作者：Erudite

這篇文章主要介紹了jQuery常見(jiàn)事件的監(jiān)聽(tīng)方式，頁(yè)面經(jīng)常會(huì)有各種事件發(fā)生，事件發(fā)生后需要進(jìn)行一些特定處理，即執(zhí)行特定的函數(shù)或者語(yǔ)句。這就需要對(duì)事件進(jìn)行監(jiān)聽(tīng)，下面關(guān)于監(jiān)聽(tīng)事件的介紹，需要的小伙伴可以參考一下

在 Web 頁(yè)面經(jīng)常會(huì)有各種事件發(fā)生，事件發(fā)生后需要進(jìn)行一些特定處理，即執(zhí)行特定的函數(shù)或者語(yǔ)句。這就需要對(duì)事件進(jìn)行監(jiān)聽(tīng)，監(jiān)聽(tīng)事件的常見(jiàn)方式有以下三種，本文將通過(guò)實(shí)例來(lái)具體介紹。

1.HTML標(biāo)簽內(nèi)聯(lián)事件

實(shí)例1：單擊頁(yè)面 "Hello" 按鈕，彈出提示框顯示 Hello world！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<button onclick="alert('Hello world!')">Hello</button>
</body>
</html>

注：在實(shí)例1中，事件的監(jiān)聽(tīng)代碼是放在 HTML 標(biāo)簽中，這種方式看起來(lái)比較直觀，但是這是一種不大提倡的事件監(jiān)聽(tīng)方式。首先，將視圖代碼（HTML）與交互代碼（Javascript）相結(jié)合，意味著每當(dāng)需要更新功能時(shí)，都必須編輯 HTML，這將給代碼后期的維護(hù)帶來(lái)很大麻煩。其次，它不具備可擴(kuò)展性。如果我們要將這個(gè)單擊功能附加到許多按鈕上，那么不僅要用一堆重復(fù)的代碼來(lái)增加頁(yè)面量，而且還會(huì)破壞可維護(hù)性。

2.用JavaScript實(shí)現(xiàn)事件監(jiān)聽(tīng)

實(shí)例2：單擊頁(yè)面"Hello"按鈕，彈出提示框顯示Hello world！

<!doctype html>
<html>
<head>
<meta charset-"utf-8">
<title>無(wú)標(biāo)題文檔</title>
<script type="text/javascript">
　　window.onload = function {
　　　　var helloBtn = document.getElementByld("helloBtn")； ? ?
? ? ? ? ? ? helloBtn.onclick = function() {
? ? ? ? ? ? ? ? ? alert("Hello world!")；
? ? ? ? ? ? }
? ? ? }
</script>
</head>

<body>
<button id="helloBtn">Hello</button>
</body>
</html>

3.用jQuery實(shí)現(xiàn)事件監(jiān)聽(tīng)

使用jQuery監(jiān)聽(tīng)事件有很多種方法，如實(shí)例3所示。

實(shí)例3：單擊頁(yè)面 "Hello" 按鈕，彈出提示框顯示 Hello world！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
　　$(function() {
//jQuery第一種監(jiān)聽(tīng)事件方法
　　　　$("#helloBtn").click(function() {
　　　　　　alert("Hello world!");
　　　　});
//jQuery第二種監(jiān)聽(tīng)事件方法
　　　　$("#helloBtn").bind("click"，function() {
　　　　　　alert("Hello world!");
　　　　});
//jQuery第三種監(jiān)聽(tīng)事件方法
　　　　$("#helloBtn").on("click"，function() {
　　　　　　alert("Hello world!");
　　　　})；
//jQuery第四種監(jiān)聽(tīng)事件方法
　　　　$("body").on({
　　　　　　click: function() {
　　　　　　　　alert("Hello world!");
　　　　　　}
　　　　}, "button");
//jQuery第五種監(jiān)聽(tīng)事件方法
　　　　$("pody").on("click", "button", function() {
　　　　　　alert("Hello world!");
　　　　});
　　});
</script>
</head>

<body>
<button id="helloBtn">Hello</button>
</body>
</html>

注：下面具體分析實(shí)例3中用到的 jQuery 事件監(jiān)聽(tīng)方法。

（1）第一種事件監(jiān)聽(tīng)方法click()，是一種比較常見(jiàn)的、便捷的事件監(jiān)聽(tīng)方法。
（2）第二種事件監(jiān)聽(tīng)方法bind()，已被jQuery 3.0棄用。自jQuery 1.7以來(lái)被 on() 方法（即第三種事件監(jiān)聽(tīng)方法）所取代，雖然在這里也能使用且不報(bào)錯(cuò)，而且此方法之前比較常見(jiàn)，但是不鼓勵(lì)使用它。
（3）第三種事件監(jiān)聽(tīng)方法on()，從jQuery 1.7開(kāi)始，所有的事件綁定方法最后都是調(diào)用on() 方法來(lái)實(shí)現(xiàn)的，使用on() 方法實(shí)現(xiàn)事件監(jiān)聽(tīng)會(huì)更快、更具一致性。
（4）第四種和第五種方法，監(jiān)聽(tīng)的是 body 上所有 button 元素的 click 事件。DOM 樹(shù)里更高層的一個(gè)元素監(jiān)聽(tīng)發(fā)生在它的 children 元素上的事件，這個(gè)過(guò)程叫作事件委托（event delegation）。感興趣的讀者可以查看官方幫助文檔。

到此這篇關(guān)于分享jQuery3種常見(jiàn)事件的監(jiān)聽(tīng)方式的文章就介紹到這了,更多相關(guān)jQuery監(jiān)聽(tīng)方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: