实例解析HTML点击事件

2021-03-24 17:23:56
1572次极悦

onclick 即点击事件，会在元素被点击时发生，支持 onclick 事件的元素有很多，但是我们一般会在按钮上使用这个事件，点击按钮触发某个事件。HTML中的点击事件也是依照这个原理来实现的。HTML点击事件是HTML事件中具有代表性的一个事件，下面我们来看个实例。

示例：例如下面代码，当我们点击按钮时，改变相应文本的内容：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>JS_侠课岛(9xkd.com)</title>

</head>

<body>

<div>

  <p>单击按钮触发点击事件</p>

  <button onclick="clickFun()">点击按钮</button>

  <p id="con">如果你点击按钮，我将变成一直小兔兔~</p>

</div>

<script>

  function clickFun(){

    document.getElementById("con").innerHTML = "耶，我变成小兔兔啦！";

  }

</script>

</body>   

</html>

在浏览器中预览效果：

那上述 gif 图中的效果是怎么实现的呢？既然我们要实现点击按钮改变文本内容，那么首先就需要一个按钮：<button onclick="clickFun()">点击按钮</button>这个按钮上通过 onclick 点击事件绑定了一个自定义的 clickFun() 函数，可以通过这个函数来改变文本内容。那我们需要在<script> 标签中定义这个函数：function clickFun(){

document.getElementById("con").innerHTML = "耶，我变成小兔兔啦！";

}在这个函数中使用 document.getElementById("con").innerHTML 可以获取 id 为 con 的对象的内嵌内容。如果使用的是赋值号 =，可以向指定对象插入内容。// 这样写可以输出id为con的元素的文本内容

console.log(document.getElementById("con").innerHTML)

// 这样写可以向id为con的元素指定文本内容，等号右边的就是被插入的内容

document.getElementById("con").innerHTML = "耶，我变成小兔兔啦！";

a标签定义超链接，用于从一张页面链接到另一张页面，它最重要的属性是 href 属性，它指示链接的目标。

<a href="http://www.w3school.com.cn">W3School</a>

最常用的就像这样添加一个链接，如果是点击事件的话，建议用下面的写法

这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会直接将js方法暴露在浏览器的状态栏。

另外我还常见到下面这种写法

href="#"表示回到最顶部。如果当前页面中需要滚动的话，那么用这种方式就可以直接回到顶部。比如有些网站会在右下角制作一个图标按钮，回到顶部，那么此时可以考虑用这种最简单的方式实现。不需要滚动的话，还是不要这么写的好，防止页面跳动。

最后，我们要知道onclick 事件会在对象被点击时发生，onclick 与 onmousedown 不同，单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。只要记住这一点我们在HTML中使用onclick事件时，才会避免出现错误。在本站的HTML教程中，还有许多其他的HTML事件的实现，想学习的小伙伴可以自主学习，动手实践。

上一篇：简述5大CSS选择器下一篇：详解HTML table标签