如何获取 onclick 调用对象？

Question

我需要在 onclick 事件的调用对象上有一个处理程序。

 <a href="123.com" onclick="click123(event);">link</a>

<script>
  function click123(event) {
    //i need <a> so i can manipulate it with Jquery
  }
</script>

我想在不使用 jQuery 的 $().click 或 $().live 的情况下执行此操作，但使用上述方法。

原文由 Konstantinos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在内联点击处理程序中传入 this

 <a href="123.com" onclick="click123(this);">link</a>

或者在函数中使用 event.target （根据 W3C DOM Level 2 Event model ）

 function click123(event)
{
    var a = event.target;
}

但是当然， IE 是不同 的，所以处理这个的 vanilla JavaScript 方式是

function doSomething(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
}

或者不那么冗长

function doSomething(e) {

    e = e || window.event;
    var targ = e.target || e.srcElement || e;
    if (targ.nodeType == 3) targ = targ.parentNode; // defeat Safari bug
}

其中 e 是 event object 在 IE 以外的浏览器中传递给函数。

不过，如果您使用的是 jQuery，我强烈建议使用不显眼的 JavaScript 并使用 jQuery 将事件处理程序绑定到元素。

原文由 Russ Cam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为最好的方法是使用 currentTarget 属性而不是 target 属性。

Event 接口的 currentTarget 只读属性标识事件 的当前目标，因为事件遍历 DOM。它始终引用事件处理程序附加到的元素 ，与 Event.target 相反，它标识事件发生的元素。

例如：

 <a href="#"><span class="icon"></span> blah blah</a>

Java脚本：

 a.addEventListener('click', e => {
    e.currentTarget; // always returns "a" element
    e.target; // may return "a" or "span"
})

原文由 Az.Youness 发布，翻译遵循 CC BY-SA 4.0 许可协议