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>

我想这样做而不使用$（）。click或$（）。live of jquery但是使用上述方法。

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 is different，所以处理这个的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;
    if (targ.nodeType == 3) targ = targ.parentNode; // defeat Safari bug
}

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

如果您正在使用jQuery，我会强烈鼓励不引人注目的JavaScript并使用jQuery将事件处理程序绑定到元素。

Answer 2

最简单的方法是将此传递给click123函数或你也可以做这样的事情（跨浏览器）：

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

Answer 3

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

尝试使用event.target

包含发布的DOM元素事件。这可以是元素注册参加活动或者它的孩子。

Answer 4

你的方法的一点是你用HTML混乱你的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
  });
});

Answer 5

我认为他最好的方法是使用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 span
})

如何获取onclick调用对象？

5 个答案: