javascript - 无法读取未定义的属性 'target' - HTML 按钮

Question

为什么会出现此错误？

Cannot read property 'target' of undefined
  at btn

我在我的 html 文件中声明了 btn()。我在调用 btn() 的 html 中有多个按钮。

function btn(event){        
  var theTarget = event.target;
  alert(theTarget.tagName);
}

Answer 1

如何执行此操作有几个选项，每个选项的行为都不同。

选项 1在按钮上设置 onclick="btn(this)"。这总是将按钮本身作为参数传递。其他选项传递事件而不是元素本身。

function btn(elem) {
  var theTarget = elem;
  console.log(theTarget.id);
}

<p>
  Option 1:
  <button id="the-button" onclick="btn(this)">
    btn(this)
    <span id="the-span" style="border: 1px solid red">This is a span</span>
  </button>
</p>

选项 2在按钮上设置 onclick="btn(event)"。这会传递事件，event.target 将成为被点击的元素。例如，如果单击按钮，将传递引用按钮内 span 的事件。

function btn(evt) {
  var theTarget = evt.target;
  console.log(theTarget.id);
}

<p>
  Option 2:
  <button id="the-button" onclick="btn(event)">
    btn(event)
    <span id="the-span" style="border: 1px solid red">This is a span</span>
  </button>
</p>
</p>

选项 3为按钮设置一个 id 属性。然后使用 JavaScript 将事件处理程序绑定(bind)到按钮。就事件引用子元素的方式而言，这类似于选项 2。

function btn(evt) {
  var theTarget = evt.target;
  console.log(theTarget.id);
}

document.getElementById('the-button').onclick = btn;

<p>
  Option 3:
  <button id="the-button">
    binding
    <span id="the-span" style="border: 1px solid red">This is a span</span>
  </button>
</p>

这是在一个程序中包含所有三个选项的片段:

function btn(evt) {
  var theTarget = evt.target || evt;
  console.log(theTarget.id);
}

document.getElementById('third-button').onclick = btn;

<p>
  Option 1:
  <button id="first-button" onclick="btn(this)">
    btn(this)
    <span id="first-button-SPAN" style="border: 1px solid red">This is a span</span>
  </button>
</p>

<p>
  Option 2:
  <button id="second-button" onclick="btn(event)">
    btn(event)
    <span id="second-button-SPAN" style="border: 1px solid red">This is a span</span>
  </button>
</p>

<p>
  Option 3:
  <button id="third-button">
    binding
    <span id="third-button-SPAN" style="border: 1px solid red">This is a span</span>
  </button>
</p>