freeCodeCamp/guide/chinese/javascript/onclick-event/index.md

title, localeTitle

title	localeTitle
Onclick Event	Onclick活动

Onclick活动

JavaScript中的onclick事件允许您作为程序员在单击元素时执行函数。

例

<button onclick="myFunction()">Click me</button> 
 
 <script> 
  function myFunction() { 
    alert('Button was clicked!'); 
  } 
 </script> 

在上面的简单示例中，当用户单击按钮时，他们将在浏览器中看到显示Button was clicked!的警报Button was clicked! 。

动态添加onclick

onclick事件也可以使用以下示例中的以下代码以编程方式添加到任何元素：

<p id="foo">click on this element.</p> 
 
 <script> 
  var p = document.getElementById("foo"); // Find the paragraph element in the page 
  p.onclick = showAlert; // Add onclick function to element 
 
  function showAlert(event) { 
    alert("onclick Event triggered!"); 
  } 
 </script> 

注意

重要的是要注意使用onclick我们只能添加一个监听器功能。如果要添加更多内容，只需使用addEventListener（），这是添加事件侦听器的首选方法。

在上面的示例中，当用户单击html的paragraph元素时，他们将看到显示onclick Event triggered的警报。

防止默认操作

但是，如果我们重视onclick以链接（HTML是a标签），我们可能想阻止默认动作发生：

<a href="https://guide.freecodecamp.org" onclick="myAlert()">Guides</a> 
 
 <script> 
  function myAlert(event) { 
    event.preventDefault(); 
    alert("Link was clicked but page was not open"); 
  } 
 </script> 

在上面的例子中，我们防止了默认行为a使用元件（开口链路） event.preventDefault()提供了内部onclick回调函数。

MDN

其他资源

jQuery .on（）事件处理程序附件