您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“jQuery3種常見事件監(jiān)聽方式是什么”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“jQuery3種常見事件監(jiān)聽方式是什么”這篇文章吧。
實(shí)例1:單擊頁面 "Hello" 按鈕,彈出提示框顯示 Hello world!
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標(biāo)題文檔</title> </head> <body> <button onclick="alert('Hello world!')">Hello</button> </body> </html>
注:在實(shí)例1中,事件的監(jiān)聽代碼是放在 HTML 標(biāo)簽中,這種方式看起來比較直觀,但是這是一種不大提倡的事件監(jiān)聽方式。首先,將視圖代碼(HTML)與交互代碼(Javascript
)相結(jié)合,意味著每當(dāng)需要更新功能時(shí),都必須編輯 HTML,這將給代碼后期的維護(hù)帶來很大麻煩。其次,它不具備可擴(kuò)展性。如果我們要將這個(gè)單擊功能附加到許多按鈕上,那么不僅要用一堆重復(fù)的代碼來增加頁面量,而且還會(huì)破壞可維護(hù)性
。
實(shí)例2:單擊頁面"Hello"按鈕,彈出提示框顯示Hello world!
<!doctype html> <html> <head> <meta charset-"utf-8"> <title>無標(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>
使用jQuery
監(jiān)聽事件有很多種方法,如實(shí)例3所示。
實(shí)例3:單擊頁面 "Hello" 按鈕,彈出提示框顯示 Hello world!
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標(biāo)題文檔</title> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function() { //jQuery第一種監(jiān)聽事件方法 $("#helloBtn").click(function() { alert("Hello world!"); }); //jQuery第二種監(jiān)聽事件方法 $("#helloBtn").bind("click",function() { alert("Hello world!"); }); //jQuery第三種監(jiān)聽事件方法 $("#helloBtn").on("click",function() { alert("Hello world!"); }); //jQuery第四種監(jiān)聽事件方法 $("body").on({ click: function() { alert("Hello world!"); } }, "button"); //jQuery第五種監(jiān)聽事件方法 $("pody").on("click", "button", function() { alert("Hello world!"); }); }); </script> </head> <body> <button id="helloBtn">Hello</button> </body> </html>
注:下面具體分析實(shí)例3中用到的 jQuery
事件監(jiān)聽方法。
(1)第一種事件監(jiān)聽方法click()
,是一種比較常見的、便捷的事件監(jiān)聽方法。
(2)第二種事件監(jiān)聽方法bind(),已被jQuery 3.0棄用。自jQuery 1.7以來被 on() 方法(即第三種事件監(jiān)聽方法)所取代,雖然在這里也能使用且不報(bào)錯(cuò),而且此方法之前比較常見,但是不鼓勵(lì)使用它。
(3)第三種事件監(jiān)聽方法on(),從jQuery 1.7開始,所有的事件綁定方法最后都是調(diào)用on() 方法來實(shí)現(xiàn)的,使用on() 方法實(shí)現(xiàn)事件監(jiān)聽會(huì)更快、更具一致性。
(4)第四種和第五種方法,監(jiān)聽的是 body 上所有 button
元素的 click 事件。DOM 樹里更高層的一個(gè)元素監(jiān)聽發(fā)生在它的 children 元素上的事件,這個(gè)過程叫作事件委托(event delegation)。感興趣的讀者可以查看官方幫助文檔。
以上是“jQuery3種常見事件監(jiān)聽方式是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。