jQuery.click() 与 onClick

htmlweb developmentfront end technology更新于 2024/7/19 10:20:17

在本文中，我们将了解 jQuery.click() 和 onClick 之间的区别。首先，让我们了解 jQuery 中的 click() 和 onClick() 是什么。

jQuery click()

示例

click() 方法会触发每个匹配元素的 click 事件。让我们看一个例子 -

<html>
   <head>
      <title>The jQuery click() Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
      <script language = "javascript">
         $(document).ready(function() {         
            $("#clickButton1").click(function(){
               alert("click event occurred");  
            });
         });
         function clickFirstButton(){		   
            $("#clickButton1").click();
         }  
      </script>	
   </head>	
   <body>			
      <form name = "sampleForm">
         <label>Enter Name: </label><input type = "text" id = "result1" title="Enter Name" value = "" ></input><br/><br/>         
         <input type = "button" id = "clickButton1" value = "Click Me!" />   <input type = "button" id = "clickButton2" value = "Click First Button!" onclick="clickFirstButton();" />
      </form>		
   </body>	
</html>

输出

点击点击我按钮 &mius;

点击点击第一个按钮按钮 −

onClick

当用户点击鼠标左键时，会触发 onclick() 事件类型。您可以针对此事件类型添加验证、警告等功能。

示例

来看一个例子 −

<!DOCTYPE html>
<html>
<head>
   <script>
      function myAttrFunc() {
         var a = document.getElementsByTagName("a")[0].getAttribute("href");
         document.getElementById("Demo").innerHTML = a;
      }
   </script>
</head>
<body>
   <h1>Courses</h1>
   <a href="https://www.cainiaomax.com/market/index.asp">Tutorialspoint Courses</a>
   <p>Clicking the below button to get the above link:</p>
   <button onclick="myAttrFunc()">GET THE LINK</button>
   <p id="Demo"></p>
</body>
</html>