无法读取未定义的属性“目标” - HTML 按钮答案

【问题标题】：Cannot read property 'target' of undefined - HTML buttons无法读取未定义的属性“目标” - HTML 按钮
【发布时间】：2020-02-03 04:14:39
【问题描述】：

为什么会出现这个错误？

Cannot read property 'target' of undefined
  at btn

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

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

【问题讨论】：

你是如何调用函数的，请提及。它应该在任何事件上，例如点击.
Cannot read property 'target' of undefined的可能重复
如果您还可以在标记中显示如何调用 btn 会有所帮助
你是绑定这个函数，还是直接在HTML中调用？
你传递任何参数吗？

标签： javascript html onclick typeerror

【解决方案1】：

有几个选项可以做到这一点，每个选项的行为都不同。

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

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 将事件处理程序绑定到按钮。就事件引用子元素的方式而言，这类似于选项 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>

这是一个在一个程序中包含所有三个选项的 sn-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>

【讨论】：

【解决方案2】：

默认情况下，函数在 JavaScript 中将参数值作为 undefined，所以我希望你忘记将 event 传递给处理函数，即传递给 btn().

理解此概念的最佳简单示例是 https://www.w3schools.com/jsref/event_target.asp

因此，不要像onclick=btn() 或onclick=btn(this) 那样调用，而是更喜欢onclick=btn(event)，否则将采用正确的undefined 作为默认值。

【讨论】：

【解决方案3】：

注意：当我们从 HTML 调用函数时，我们会直接得到按钮，即target。

通过绑定我们得到event

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

document.querySelector('#boundEvent').onclick = btn;

<!-- In this way we are passing the button directly. -->
<button onclick="btn(this);">Direct call</button>
<!-- When we bind in our code (Best way) we will get an event object. --> 
<button id="boundEvent">Bound Event</button>

【讨论】：

【解决方案4】：

表示调用btn(...)方法时，event参数尚未设置（即未定义）。

当代码尝试使用该方法时，您应该验证是否设置了event。

不使用event 作为函数中的参数名称也可能更安全——这可能会导致问题（即apparently a global variable in IE）。试试改成myEvent？

【讨论】：