如何获得onclick调用对象？

我需要在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或$().livejQuery的情况下执行上述操作。

传入this内联点击处理程序

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

或event.target在函数中使用（根据W3C DOM 2级事件模型）

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

但是，当然，IE是不同的，因此处理此问题的原始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将事件处理程序绑定到元素。

最简单的方法是通过 这个给click123功能，或者您也可以做这样的事情（跨浏览器）：

function click123(e){
  e = e || window.event;
  var src = e.target || e.srcElement;
  //src element is the eventsource
}

http://docs.jquery.com/Events/jQuery.Event

试试看 event.target

包含发出事件的DOM元素。这可以是为事件注册的元素或其子元素。

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

当事件遍历DOM时，Event接口的currentTarget只读属性标识该事件的当前目标。它始终引用事件处理程序已附加到的元素，而不是Event.target，后者标识发生事件的元素。

例如：

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

Javascript：

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

方法的问题是，您会使用JavaScript弄乱HTML。如果将javascript放在外部文件中，则可以轻松访问HTML，这更加整洁。

稍后，您可以使用addEventListener / attackEvent（IE）扩展代码，以防止内存泄漏。

这是没有jQuery的

<a href="123.com" id="elementid">link</a>

window.onload = function () {
  var el = document.getElementById('elementid');
  el.onclick = function (e) {
    var ev = e || window.event;
    // here u can use this or el as the HTML node
  }
}

您说要使用jQuery进行操作。因此，您可以使用jQuery。比这样做更好：

// this is the window.onload startup of your JS as in my previous example. The difference is 
// that you can add multiple onload functions
$(function () {
  $('a#elementid').bind('click', function (e) {
    // "this" points to the <a> element
    // "e" points to the event object
  });
});