如何在JavaScript中使用onclick 事件

每当你访问一个网站时，你可能会点击一些东西，如链接或按钮。

链接把你带到页面的某个部分，网站的另一个页面，或完全是另一个网站。另一方面，按钮通常由JavaScript事件操纵，因此它们可以触发某些功能。

在本教程中，我们将使用两种不同的方法来探索在JavaScript中执行点击事件的方式。

首先，我们将看一下传统的onclick 风格，你可以从HTML页面中直接进行。然后我们将看到更现代的 "点击 "eventListner ，它让你把HTML和JavaScript分开。

如何在JavaScript中使用onclick 事件

当一个按钮被点击时，onclick 事件会执行某种功能。这可能是当用户提交一个表单时，当你改变网页上的某些内容时，以及其他类似的事情。

你把你想执行的JavaScript函数放在按钮的开口标签里。

基本的onclick 语法

<element onclick="functionToExecute()">Click</element>

举例来说

<button onclick="functionToExecute()">Click</button>

注意，onclick 属性是纯粹的JavaScript。它所取的值，也就是你想执行的函数，说明了一切，因为它就在打开的标签中被调用。

在JavaScript中，你通过调用一个函数的名称来调用它，然后在函数标识符（名称）后面加一个小括号。

onclick 事件实例

我已经准备了一些基本的HTML，其中有一些样式，这样我们就可以把onclick 事件放到现实世界中去:

<div>
  <p class="name">freeCodeCamp</p>
  <button>Change to Blue</button>
</div>

而这里是让它看起来不错的CSS，以及所有其他的示例代码:

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

所以，在网页上，这就是我们的内容：

我们的目的是当我们点击按钮时将文本的颜色改为蓝色。所以我们需要给我们的按钮添加一个onclick 属性，然后编写JavaScript函数来改变颜色。

所以我们需要在我们的HTML中做一个小小的改动：

<div>
  <p class="name">freeCodeCamp</p>
  <button onclick="changeColor()">Change to Blue</button>
</div>

我们要执行的函数是changeColor() 。所以我们需要把它写在一个JavaScript文件中，或者写在HTML文件的<script> 标签里面。

如果你想把你的脚本写在一个JavaScript文件中，你需要用下面的语法在HTML中链接它：

<script src="path-to-javascript-file"></script>

如果你想把脚本写在一个HTML文件中，只要把它放在script标签里面就可以了：

<script>
  // Your Scripts
</script>

现在，让我们来写我们的changeColor() 函数。

首先，我们需要选择我们要操作的元素，也就是<p> 标签里面的freeCodeCamp文本。

在JavaScript中，你可以用DOM的getElementById() 、getElementsByClassName() 、或querySelector() 方法来做。然后你把这个值存储在一个变量中。

在本教程中，我将使用querySelector() ，因为它更现代，而且更快。我还将使用const 来声明我们的变量，而不是let 和var ，因为使用const ，事情会更安全，因为该变量变成了只读。

const name = document.querySelector(".name");

现在我们已经选定了文本，让我们来写我们的函数。在JavaScript中，基本的函数语法是这样的:

function funcctionName () {
    // What to do
} 

所以我们来写我们的函数:

function changeColor() {
    name.style.color = "blue";
}

发生了什么事？

记得在HTML中，changeColor() 是我们要执行的函数。这就是为什么我们的函数标识符（名称）被设置为changeColor 。如果这个名称与HTML中的内容不相关，它就不会起作用。

在DOM（文档对象模型，指所有的HTML）中，要改变任何与风格有关的东西，你需要写上 "style"，然后是一个点（.）。这后面是你想要改变的东西，可能是颜色、背景颜色、字体大小等等。

所以，在我们的函数中，我们使用我们声明的名字变量来获得我们的freeCodeCamp文本，然后我们将颜色改为蓝色。

当按钮被点击时，文本的颜色会变成蓝色:

我们的代码开始工作了!

我们可以通过改变我们的文本的颜色来使事情更进一步。

<div>
      <p class="name">freeCodeCamp</p>
      <button onclick="changeColor('blue')" class="blue">Blue</button>
      <button onclick="changeColor('green')" class="green">Green</button>
      <button onclick="changeColor('orangered')" class="orange">Orange</button>
</div>

所以，我们要做的是把文字变成蓝色、绿色和橙红色。

这一次，我们的HTML中的onclick 函数会获取我们想要改变文本的颜色的值。这些在JavaScript中被称为参数。我们要写的函数也取它自己的，我们将称之为 "颜色"。

我们的网页发生了一点变化:

所以，让我们选择我们的freeCodeCamp文本，并编写函数来改变其颜色为蓝色、绿色和橙红色。

const name = document.querySelector(".name");

function changeColor(color) {
   name.style.color = color;
}

函数中的代码块采取了name变量（我们存储我们的freeCodeCamp文本的地方），然后将颜色设置为我们传入HTML按钮中的changeColor() 函数的任何内容。

如何在JavaScript中使用点击eventListener

在JavaScript中，有多种方法可以做同样的事情。随着JavaScript本身的发展，我们开始需要将HTML、CSS和JavaScript代码分开，以符合最佳实践。

事件监听器使之成为可能，因为它让你将JavaScript与HTML分开。你也可以用onclick来做到这一点，但让我们在这里采取另一种方法。

基本eventListener 语法

 element.addEventListener("type-of-event", functionToExecute)

现在，让我们通过使用点击事件监听器将freeCodeCampt文本改为蓝色

这就是我们的新HTML:

 <div>
      <p class="name">freeCodeCamp</p>
      <button>Change Color</button>
 </div>

这就是它看起来的样子:

这次在我们的脚本中，我们也需要选择按钮（不仅仅是freeCodeCamp文本）。这是因为在我们的按钮的开头标签中没有任何JavaScript，这很好。

所以，我们的脚本看起来像这样:

const name = document.querySelector(".name");
const btn = document.querySelector("button");

      btn.addEventListener("click", function () {
        name.style.color = "blue";
 });

我们也可以把我们的功能完全从eventListener ，我们的功能仍然会保持不变。

btn.addEventListener("click", changeColor);
      function changeColor() {
        name.style.color = "blue";
}

如何建立一个 "显示更多 "和 "显示更少"如何用JavaScrpit构建 "显示更多 "和 "显示更少 "的按钮

学习的最好方法之一是做项目，所以让我们利用我们所学到的关于onclick 和 "点击 "eventListner 来做一些事情。

当你访问一个博客时，你经常先看到文章的摘录。然后你可以点击 "阅读更多 "按钮来显示其余的内容。让我们试着这样做。

这就是我们正在处理的HTML:

 <article id="content">
      <p>
        freeCodeCamp is one of the best platforms to learn how to code.
        freeCodeCamp has a detailed curriculum that will take you from zero to
        hero in web development, software engineering, machine learning, and
        more.
      </p>

      <p>
        freeCodeCamp also has a YouTube channel containing over 1000 videos on
        web development, software engineering, machine learning, data science,
        freelance web development, database administration, and pretty much
        anything related to tech. To get updates when videos are uploaded, you
        need to subscribe to the channel and turn on notifications. You can also
        follow freeCodeCamp on Twitter, where links to well written articles and
        videos are tweeted daily.
      </p>

      <p>
        Since no one has to pay to learn how to code on freeCodeCamp,
        freeCodeCamp runs on voluntary donations from donors all around the
        world in order to pay employees and maintain servers. If you are
        generous enough consider joining the donors.
      </p>
    </article>

<button onclick="showMore()">Show more</button>

这是一个简单的HTML，有一些关于freeCodeCamp的事实。还有一个我们已经附加了一个onclick 的按钮。我们要执行的函数是showMore() ，我们很快就会写。

没有CSS，这就是我们所拥有的:

它并不难看，但我们可以让它看起来更好，并按照我们想要的方式行事。因此，我们有一些CSS，我将在下面解释。

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background: #f1f1f1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }

      article {
        width: 400px;
        background: #fff;
        padding: 20px 20px 0;
        font-size: 18px;
        max-height: 270px;
        overflow: hidden;
        transition: max-height 1s;
        text-align: justify;
        margin-top: 20px;
      }

      p {
        margin-bottom: 16px;
      }

      article.open {
        max-height: 1000px;
      }

      button {
        background: #0e0b22;
        color: #fff;
        padding: 0.6rem;
        margin-top: 20px;
        border: none;
        border-radius: 4px;
      }

      button:hover {
        cursor: pointer;
        background: #1e1d25;
      }
</style>

这些CSS在做什么？

通过通用选择器（* ），我们删除了分配给元素的默认margin和padding，因此我们可以添加我们自己的margin和padding。

我们还将框的大小设置为border-box，这样我们就可以将padding和border包含在我们元素的总宽度和高度中。

我们用Flexbox将正文中的所有内容居中，并给它一个浅灰色的背景。

我们的<article> ，其中包含文本，宽度为400px ，白色背景（#fff），顶部有20px的padding，左右各20，底部为0。

它里面的段落标签的字体大小为18px，然后我们给它们的最大高度为270px 。由于文章元素的最大高度，所有的文字都不会被包含，而会溢出。为了解决这个问题，我们把溢出设置为隐藏，以便一开始不显示这些文字。

过渡属性确保每个变化都在1秒后发生。article 内的所有文本都是对齐的，并且顶部有20像素的边距，这样它就不会太依附于页面的顶部。

因为我们去掉了默认的边距，所以我们的段落都被挤到了一起。所以我们设置了16像素的底边距，以便将它们彼此分开。

我们的选择器，article.open ，有一个max-height 的属性设置为1000px 。这意味着，任何时候文章元素有一个open 的类附加在它上面，最大高度将从270px 变为1000px ，以显示文章的其余部分。这可以通过JavaScript实现--我们的游戏改变者。

我们将按钮的背景设计成深色，并使其成为白色。我们把它的边框设置为无，以去除HTML在按钮上的默认边框，我们给它的边框半径为4px ，这样它就有一个稍微圆润的边框。

最后，我们使用CSS中的hover 伪类，将按钮的光标改为指针。当用户将他们的光标悬停在上面时，背景颜色会稍有变化。

就这样--这就是CSS。

我们的页面现在看起来更好了:

我们需要做的下一件事是编写我们的JavaScript，这样我们就可以看到被隐藏的文章的其余部分。

我们有一个onclick 属性在我们的按钮打开标签内，准备执行一个showMore() 函数，所以让我们来写这个函数。

我们需要首先选择我们的文章，因为我们必须显示它的其余部分:

const article = document.querySelector("#content");

我们需要做的下一件事是编写函数showMore() ，这样我们就可以在看到文章的其余部分和隐藏它之间进行切换:

function showMore() {
     if (article.className == "open") {
       // read less
       article.className = "";
       button.innerHTML = "Show more";
     } else {
       //read more
       article.className = "open";
       button.innerHTML = "Show less";
     }
  }

这个函数是做什么的？

我们在这里使用了一个if…else 语句。这是JavaScript的一个重要部分，它可以帮助你在代码中做出决定，如果满足某个条件的话。

基本的语法是这样的:

if (condition == "something") {
  // Do something
} else {
  // Do something else
}

在这里，如果文章的类名等于open（也就是说，我们要给它加上open的类，在CSS中被设置为最大高度为1000px），那么我们要看到文章的其余部分。否则，我们要让文章回到初始状态，即它的一部分被隐藏起来。

我们通过在else块中给它分配一个open的类来做到这一点，这使得它显示文章的其余部分。然后我们在if块中把这个类设置为空字符串（none），这使得它返回到初始状态。

我们的代码运行良好，过渡平稳：

我们可以把HTML和JavaScript分开，并且仍然使用onclick ，因为onclick是JavaScript。所以我们可以把这个写在一个JavaScript文件里，而不是从HTML开始。

 button.onclick = function () {
     if (article.className == "open") {
       // read less
       article.className = "";
       button.innerHTML = "Show more";
     } else {
       //read more
       article.className = "open";
       button.innerHTML = "Show less";
     }
  };

我们也可以用一个eventListner来做这件事。

<article id="content">
      <p>
        freeCodeCamp is one of the best platforms to learn how to code.
        freeCodeCamp has a detailed curriculum that will take you from zero to
        hero in web development, software engineering, machine learning, and
        many more.
      </p>

      <p>
        freeCodeCamp also has a YouTube channel containing over 1000 videos on
        web development, software engineering, machine learning, data science,
        freelance web development, database administration, and pretty more
        anything related to tech. To get updates when videos are uploaded, you
        need to subscribe to the channel and turn on notifications. You can also
        follow freeCodeCamp on Twitter, where links to well written articles and
        videos are tweeted daily.
      </p>

      <p>
        Since no one has to pay to learn how to code on freeCodeCamp,
        freeCodeCamp runs on voluntary donations from donors all around the
        world in order to pay employees and maintain servers. If you are
        generous enough consider joining the donors.
      </p>
</article>

<button id="read-more">Show more</button>

 const article = document.querySelector("#content");
 const button = document.querySelector("#read-more");

button.addEventListener("click", readMore);

function readMore() {
     if (article.className == "open") {
       // Read less
     article.className = "";
     button.innerHTML = "Show more";
   } else {
     article.className = "open";
     button.innerHTML = "Show less";
   }
}

我们的功能仍然是一样的!

总结

我希望本教程能帮助你理解点击事件在JavaScript中的工作原理。我们在这里探索了两种不同的方法，所以现在你可以开始在你的编码项目中使用它们。

谢谢你的阅读，并继续编码。