jQuery | on() 示例

on()是 jQuery 中的一种内置方法，用于为 DOM 树中的选定元素和子元素附加一个或多个事件处理程序。 DOM（文档对象模型）是万维网联盟标准。这定义了访问 DOM 树中的元素。
句法：

$(selector).on(event, childSelector, data, function)

参数：它接受下面指定的一些参数-

• 事件：这指定附加到所选元素的事件。
• childSelector：这是可选的，它指定可以使用给定事件处理程序的特定子级。
• data：这是可选的，它指定要与函数一起传递的附加数据。
• 函数：这指定了事件发生时要运行的函数。

返回值：这将返回附加到所选元素的所有事件处理程序。

显示 on() 方法工作的 jQuery 代码：
代码#1：
在下面的代码中，子说明符和数据没有被传递。

  

    
    
        <!--jQuery code to show on method -->
        $(document).ready(function() {
            $("p").on("click", function() {
                document.getElementById("p1").innerHTML = "Paragraph changed!";
            });
        });
    
    
        #p1 {
            font-size: 30px;
            width: 400px;
            padding: 20px;
            border: 2px solid green;
        }
    

  

    
    Click Here !!!

  

输出：
在点击生成的输出之前 -

单击生成的输出后-

代码#2：
在下面的代码中，数据和消息都被传递给函数。

  

    
    
        <!--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)
        });
    
    
        #p1 {
            font-size: 30px;
            width: 470px;
            padding: 20px;
            border: 2px solid green;
        }
    

  

    
    Click Me!

  

输出 ：
在单击生成的输出之前 -

单击生成的输出后-