为什么和何时在JS中使用.target

Question

function listenColor(evt) {
  const target = evt.target || evt.srcElement; // get current input
  changeColor(target.value); // pass it's value to a changeColor function
}

为什么以及何时使用target以及为什么在此代码|| evt.srcElement中使用？

Answer 1

这里是一个简短的摘要：

  

为什么以及何时使用目标以及为什么在此代码“ || evt.srcElement”中。谢谢

event.target用于标识和获取触发事件的元素。 event.srcElement做同样的事情，但是它与Internet Explorer兼容。因此，它们与OR = ||一起使用，以防其他人不起作用。

因此event.target和event.srcElement都返回触发事件的元素的Javascript Element Object。

请考虑以下用例：

想象一下，您在下面有4个链接：

<a class="link" href="/link1"></a>
<a class="link" href="/link2"></a>
<a class="link" href="/link3"></a>
<a class="link" href="/link4"></a>

您想要获取元素的href来更改window.location：

您可能会考虑使用e = document.querySelector(".link")获取触发事件的元素的对象。但这是行不通的，因为您有4个具有相同查询选择器的链接。因此，要解决此问题，您希望获得e = event.target || event.srcElement，它将返回触发事件的实际元素，并且通过调用.getAttribute("href")您将获得触发{的元素的href {1}}。