Question

我还在学习这个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'，（）=＆gt; { 的console.log（123）; }）;`

Answer 1

活动名称为click，而非onclick。分配到元素的属性时使用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>

Answer 2

如果您只想让按钮在悬停时有阴影，则可以使用css。 element：hover {}

dom操纵/事件处理程序没有工作

2 个答案: