JavaScript DOM事件:Onclick和Onload

2020年12月30日10:50:23 发表评论 37 次浏览

本文概述

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

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

你可以在JavaScript中侦听许多DOM(文档对象模型)事件, 但是点击和负载是最常见的。

Onclick事件

的点击JavaScript中的事件可让你在单击元素时执行函数。

例子

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

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

在上面的简单示例中, 当用户单击按钮时, 他们将在浏览器中看到一条警报, 其中显示单击了按钮!.

新增中点击动态地

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

为此, 点击在以下示例中, 可以使用以下代码以编程方式将event添加到任何元素:

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

注意

请务必注意, 使用点击我们只能添加一个侦听器功能。如果要添加更多, 请使用addEventListener(), 这是添加事件的首选方式。

在上面的示例中, 当用户点击段中的元素html, 他们会看到一条警报, 显示onclick事件已触发.

防止默认动作

但是, 如果我们附加点击链接(HTML的一种标签), 我们可能希望阻止默认操作的发生:

<a id="bar" href="https://guide.notlogy.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>

在上面的示例中, 我们防止了默认行为一种元素(打开链接)使用event.preventDefault()在我们里面点击回调函数。

上载事件

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

例子:

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

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

可以缩短为:

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

在上面的示例中, 网页加载完成后, myFunction函数将被调用, 显示页面加载完成提醒用户。

的负载事件通常附加到<身体>元件。然后一旦<身体>页面已加载, 其中包括所有图像以及CSS和JS文件, 脚本将运行。

更多信息:

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

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

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: