.onload:_JavaScript DOM事件：Onclick和Onload

最新推荐文章于 2023-06-08 22:11:21 发布

cumian8165

最新推荐文章于 2023-06-08 22:11:21 发布

阅读量407

点赞数

文章标签： javascript js css html python ViewUI

原文链接：https://www.freecodecamp.org/news/javascript-dom-events-onclick-and-onload/

版权

.onload:

In the early days of the internet, web pages were truly static – there were only text and images. Sure, sometimes that image was an animated gif, but it was still just an image.

在互联网的早期，网页确实是静态的-只有文字和图像。当然，有时该图像是一个gif动画，但它仍然只是图像。

With the advent of JavaScript, it became increasingly possible to create interactive pages that would respond to actions like clicking on a button or having a scroll animation.

随着JavaScript的出现，创建交互式页面以响应诸如单击按钮或滚动动画之类的动作的可能性越来越大。

There are a number of DOM (Document Object Model) events that you can listen for in JavaScript, but onclick and onload are among the most common.

您可以在JavaScript中侦听许多DOM(文档对象模型)事件，但是onclick和onload是最常见的事件。

Onclick事件 (Onclick Event)

The onclick event in JavaScript lets you execute a function when an element is clicked.

JavaScript中的onclick事件使您可以在单击元素时执行函数。

例 (Example)

<button onclick="myFunction()">Click me</button>

<script>
  function myFunction() {
    alert('Button was clicked!');
  }
</script>

In the simple example above, when a user clicks on the button they will see an alert in their browser showing Button was clicked!.

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

动态添加`onclick` (Adding `onclick` dynamically)

The example above works, but is generally considered bad practice. Instead, it's better to separate the content of the page (HTML) from the logic (JS).

上面的示例有效，但通常被认为是不良做法。相反，最好将页面(HTML)的内容与逻辑(JS)分开。

To do this, the onclick event can be programmatically added to any element using the following code in the following example:

为此，可以在以下示例中使用以下代码以编程方式将onclick事件添加到任何元素：

<p id="foo">click on this element.</p>

<script>
  const 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>

注意 (Note)

It’s important to note that using onclick we can add just one listener function. If you want to add more, just use addEventListener(), which is the preferred way for adding events.

请务必注意，使用onclick只能添加一个侦听器功能。如果要添加更多内容，只需使用addEventListener() ，这是添加事件的首选方式。

In the above example, when a user clicks on the paragraph element in the html, they will see an alert showing onclick Event triggered.

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

防止默认动作 (Preventing default action)

However if we attach onclick to links (HTML’s a tag) we might want prevent default action to occur:

但是，如果我们将onclick附加到链接(HTML a标记)，我们可能希望防止发生默认操作：

<a id="bar" href="https://guide.freecodecamp.org">Guides</a>

<script>
  const link = document.getElementById("bar"); //  Find the link element
  link.onclick = myAlert; // Add onclick function to element

  function myAlert(event) {
    event.preventDefault();
    alert("Link was clicked but page was not open");
  }
</script>

In the above example we prevented default behavior of a element (opening link) using event.preventDefault() inside our onclick callback function.

在上面的示例中，我们在onclick回调函数中使用event.preventDefault()防止a元素(打开链接)的默认行为。

上载事件 (Onload Event)

The onload event is used to execute a JavaScript function immediately after a page has been loaded.

onload事件用于在页面加载后立即执行JavaScript函数。

例： (Example:)

const body = document.body;
body.onload = myFunction;

function myFunction() {
  alert('Page finished loading');
}

Which can be shortened to:

可以缩短为：

document.body.onload = function() {
  alert('Page finished loading');
}

In the above example, as soon as the web page has loaded, the myFunction function will be called, showing the Page finished loading alert to the user.

在上面的示例中，网页加载完成后，将立即调用myFunction函数，向用户显示“ Page finished loading警报。

The onload event is usually attached to the <body> element. Then once the <body> of the page has loaded, which includes all images, and CSS and JS files, your script will run.

onload事件通常附加到<body>元素。然后，页面的<body>加载完毕(包括所有图像以及CSS和JS文件)后，脚本将运行。

更多信息： (More Information:)

These are only two of the many DOM events you can manipulate with JavaScript, but are among the mostly commonly used.

这些只是您可以使用JavaScript处理的许多DOM事件中的两个，但它们是最常用的事件之一。

But sometimes you don't need to listen for DOM events at all, and want to use a time based event like a countdown. For a quick tutorial on timing events, check out this article.

但是有时候您根本不需要侦听DOM事件，而是想要使用基于时间的事件(例如倒数计时)。有关定时事件的快速教程，请参阅本文。

翻译自: https://www.freecodecamp.org/news/javascript-dom-events-onclick-and-onload/

.onload:

cumian8165

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
.onload:_JavaScript DOM事件：Onclick和Onload

.onload:In the early days of the internet, web pages were truly static – there were only text and images. Sure, sometimes that image was an animated gif, but it was still just an image. 在互联网的早期，网页确实是静...
复制链接

扫一扫