JavaScript中HTML的点击处理(onclick)是什么?

什么是HTML

HTML 是一种在浏览器(IE、Chrome 等)中查看时看起来很漂亮的书写方式。

HTML 由标签(我想你已经看到了 <h1></h1>)和它们的值组成,浏览器显示为每个标签确定的内容。

例如,在<h1>Hello World</h1>的情况下,它会被转换为“h1”指定的大小和颜色并显示在浏览器中。

作为测试,创建一个名为 test.html 的文件,

<h1>Hello World</h1>
<h2>Hello World</h2>
Hello World

并保存,然后在浏览器中查看。我认为相同的“Hello World”看起来会有所不同。

这样,在HTML中,可以将夹在标签之间的部分作为该标签的元素收集起来。

此外,每个标签还可以具有各种附加功能。请注意,每个标签可以添加的功能是不同的。

什么是onclick事件处理

如前所述,您可以将 onclick 指定为标记的附加功能。

通过添加此函数,可以检测何时单击此标记元素并相应地调用 JavaScriot 函数。

JavaScript中HTML的点击处理(onclick)是什么?

让我们使用 onclick 创建事件处理

现在让我们创建它。

您可以将 onclick 添加到各种标签。您也可以将它添加到 body 标签中。如果将它添加到身体,请确保它会影响整个身体。

由于body中有h1等元素,所以还需要注意的是,点击h1元素会产生两个onclick事件。此外,您可以指定要调用的相同函数,也可以添加参数。

<!DOCTYPE html>
<html>
  <body onclick="bodyclick()">
    <h1 onclick='hclick("h1")'>Hello World</h1>
    <h2 onclick='hclick("h2")'>Hello World</h2>
    Hello World
    <script>
      function bodyclick(){
        alert("bodyclick")
      }
      function hclick(msg){
        alert(msg)
      }
    </script>
  </body>
</html>

结语

这次我调用了一个简单的函数,但是你可以熟练的使用onclick来实现各种实现,所以请记住。

最后编辑于:2023/03/20作者: 烽烟无限