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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。