dom 操作/事件处理程序不起作用答案

【问题标题】：dom manipulation / event handlers didnt workdom 操作/事件处理程序不起作用
【发布时间】：2018-09-22 02:55:16
【问题描述】：

我还在学习这种 dom 操作，所以我尝试让我的按钮在悬停时有阴影。

这里是html代码

<nav class="navbar navbar-expand-sm fixed-top" id="myNavbar">
  <div class="navbar-header">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupported" aria-controls="navbarSupported" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
  <a href="#" class="navbar-brand" id="hello">Navbar</a>
  <!-- Nav content -->
  <div class="collapse navbar-collapse" id="navbarSupport">
    <ul class="nav navbar-nav navbar-left">
      <li class="nav-item">
        <a href="#" class="nav-link active">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">About</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Inspiration</a>
      </li>
    </ul>
    <ul class="nav navbar-nav ml-auto navbar-right">
      <li class="nav-item">
        <a href="#" class="nav-link">Create</a>
      </li>
    </ul>
  </div>
</nav>

在这里我测试了 dom 操作是否有效，因此我尝试单击导航栏进行测试，但控制台中没有显示任何内容，但没有任何错误。

`const btn = document.getElementById('myNavbar');

btn.addEventListener('onclick', () => { 控制台.log(123); });`

【问题讨论】：

标签： javascript html

【解决方案1】：

事件的名称是click，而不是onclick。分配给元素的 property 时使用onclick（通常应尽量避免），例如

btn.onclick = () => console.log('foo');

但在添加监听器时使用'click'字符串。

const btn = document.getElementById('myNavbar');
btn.addEventListener('click', () => { console.log(123); });

<nav class="navbar navbar-expand-sm fixed-top" id="myNavbar">
  <div class="navbar-header">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupported" aria-controls="navbarSupported" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
  <a href="#" class="navbar-brand" id="hello">Navbar</a>
  <!-- Nav content -->
  <div class="collapse navbar-collapse" id="navbarSupport">
    <ul class="nav navbar-nav navbar-left">
      <li class="nav-item">
        <a href="#" class="nav-link active">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">About</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Inspiration</a>
      </li>
    </ul>
    <ul class="nav navbar-nav ml-auto navbar-right">
      <li class="nav-item">
        <a href="#" class="nav-link">Create</a>
      </li>
    </ul>
  </div>
</nav>

【讨论】：

【解决方案2】：

如果你只是想让按钮在悬停时有阴影，你可以使用 css。元素：悬停{ }

【讨论】：