jQuery on()方法

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

语法:

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

参数：它接受一些参数，具体如下–**。

event。这指定了附属于所选元素的事件。
childSelector。这是可选的，这指定了给定的事件处理程序可以使用的具体孩子。
data:这是可选的，这指定了要与函数一起传递的额外数据。
function。这指定了事件发生时要运行的函数。

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

例子1：在下面的代码中，没有传递子指定器和数据。

<!DOCTYPE html>
<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>

输出:

jQuery on()方法

例子2：在下面的代码中，数据和信息都被传递给了函数。

<!DOCTYPE html>
<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>