JQuery on()用法及代碼示例

on()是jQuery中的一種內置方法，用於為DOM樹中的選定元素和子元素附加一個或多個事件處理程序。 DOM(文檔對象模型)是萬維網聯盟標準。這定義用於訪問DOM樹中的元素。
用法:

$(selector).on(para1, para2, para3, para4)

參數：它接受下麵指定的一些參數-

para1:這指定附加到所選元素的事件。
para2:這是可選的，它指定可以使用給定事件處理程序的特定子項。
para3:這是可選的，並且指定與該函數一起傳遞的其他數據。
para4:這指定事件發生時要運行的函數。

返回值：這將返回附加到選定元素的所有事件處理程序。

jQuery代碼顯示on()方法的用法方式：
代碼1：
在下麵的子說明符代碼中，未傳遞數據。

<html> 
  
<head> 
    <script src="https://ajax.googleapis.com/ajax/ 
             libs/jquery/3.3.1/jquery.min.js"></script> 
    <script> 
        <!--jQuery code to show on method -->
        $(document).ready(function() { 
            $("p").on("click", function() { 
                document.getElementById("p1").innerHTML = "Paragraph changed!"; 
            }); 
        }); 
    </script> 
    <style> 
        #p1 { 
            font-size: 30px; 
            width: 400px; 
            padding: 20px; 
            border: 2px solid green; 
        } 
    </style> 
</head> 
  
<body> 
    <!--click on this paragraph -->
    <p id="p1">Click Here !!!</p> 
</body> 
  
</html>

輸出：
在點擊生成的輸出之前，

點擊生成的輸出後，

代碼2：
在下麵的代碼中，數據和消息都被傳遞給該函數。

<html> 
  
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/ 
              jquery/3.3.1/jquery.min.js"></script> 
    <script> 
        <!--jQuery code to show on method -->
        function handlerName(event) { 
            var t = event.data.msg; 
            document.getElementById("p1").innerHTML = t; 
  
        } 
  
        $(document).ready(function() { 
            $("p").on("click", { 
                msg: "You just clicked the given paragraph !" 
            }, handlerName) 
        }); 
    </script> 
    <style> 
        #p1 { 
            font-size: 30px; 
            width: 470px; 
            padding: 20px; 
            border: 2px solid green; 
        } 
    </style> 
</head> 
  
<body> 
    <!--click on this paragraph -->
    <p id="p1">Click Me!</p> 
</body> 
  
</html>

輸出：
在點擊生成的輸出之前，

點擊生成的輸出後，

相關用法

注：本文由純淨天空篩選整理自kundankumarjha大神的英文原創作品 jQuery | on() with Examples。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。