在 Web 頁面經常會有各種事件發生，事件發生后需要進行一些特定處理，即執行特定的函數或者語句。這就需要對事件進行監聽，監聽事件的常見方式有以下三種，本人將通過實例來具體介紹。
1.HTML標簽內聯事件
實例1：單擊頁面 "Hello" 按鈕，彈出提示框顯示 Hello world！
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> </head> <body> <button onclick="alert('Hello world!')">Hello</button> </body> </html>
注：在實例1中，事件的監聽代碼是放在 HTML 標簽中，這種方式看起來比較直觀，但是這是一種不大提倡的事件監聽方式。首先，將視圖代碼（HTML）與交互代碼（Javascript）相結合，意味着每當需要更新功能時，都必須編輯 HTML，這將給代碼后期的維護帶來很大麻煩。其次，它不具備可擴展性。如果我們要將這個單擊功能附加到許多按鈕上，那么不僅要用一堆重復的代碼來增加頁面量，而且還會破壞可維護性。
2.用JavaScript實現事件監聽
實例2：單擊頁面"Hello"按鈕，彈出提示框顯示Hello world！
<!doctype html> <html> <head> <meta charset-"utf-8"> <title>無標題文檔</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實現事件監聽
使用jQuery監聽事件有很多種方法，如實例3所示。
實例3：單擊頁面 "Hello" 按鈕，彈出提示框顯示 Hello world！
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function() { //jQuery第一種監聽事件方法 $("#helloBtn").click(function() { alert("Hello world!"); }); //jQuery第二種監聽事件方法 $("#helloBtn").bind("click"，function() { alert("Hello world!"); }); //jQuery第三種監聽事件方法 $("#helloBtn").on("click"，function() { alert("Hello world!"); })； //jQuery第四種監聽事件方法 $("body").on({ click: function() { alert("Hello world!"); } }, "button"); //jQuery第五種監聽事件方法 $("pody").on("click", "button", function() { alert("Hello world!"); }); }); </script> </head> <body> <button id="helloBtn">Hello</button> </body> </html>
注：下面具體分析實例3中用到的 jQuery 事件監聽方法。
（1）第一種事件監聽方法click()，是一種比較常見的、便捷的事件監聽方法。
（2）第二種事件監聽方法bind()，已被jQuery 3.0棄用。自jQuery 1.7以來被 on() 方法（即第三種事件監聽方法）所取代，雖然在這里也能使用且不報錯，而且此方法之前比較常見，但是不鼓勵使用它。
（3）第三種事件監聽方法on()，從jQuery 1.7開始，所有的事件綁定方法最后都是調用on() 方法來實現的，使用on() 方法實現事件監聽會更快、更具一致性。
（4）第四種和第五種方法，監聽的是 body 上所有 button 元素的 click 事件。DOM 樹里更高層的一個元素監聽發生在它的 children 元素上的事件，這個過程叫作事件委托（event delegation）。感興趣的讀者可以查看官方幫助文檔。