当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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