如何将触发`onclick`事件的元素的id传递给事件处理函数

Raj*_*pta 53 html javascript

如何将触发onclick事件的元素的id传递给事件处理函数.

我正在做这样的事 -

<link onclick="doWithThisElement(id_of_this_element)" />
Run Code Online (Sandbox Code Playgroud)

jbr*_*ver 114

您可以直接传递元素本身,而不是传递ID:

<link onclick="doWithThisElement(this)" />
Run Code Online (Sandbox Code Playgroud)

或者,如果您坚持要传递ID:

<link id="foo" onclick="doWithThisElement(this.id)" />
Run Code Online (Sandbox Code Playgroud)

这是JSFiddle演示:http: //jsfiddle.net/dRkuv/


Fel*_*ing 17

触发事件的元素可能与绑定处理程序的元素不同,因为事件会冒出DOM树.

因此,如果要获取事件处理程序绑定的元素的ID ,可以使用this.id(this参考元素)轻松完成.

但是,如果你想获得该事件的元素起源,那么你有访问它event.target在W3C兼容的浏览器,并event.srcElement在IE 8及以下.

我会避免在onXXXXHTML属性中编写大量JavaScript .我只传递event对象并将代码提取到处理程序中(或在额外函数中)提取元素:

<div onlick="doWithThisElement(event)">
Run Code Online (Sandbox Code Playgroud)

然后处理程序看起来像这样:

function doWithThisElement(event) {
    event = event || window.event; // IE
    var target = event.target || event.srcElement; // IE

    var id = target.id;
    //...
}
Run Code Online (Sandbox Code Playgroud)

我建议在quirksmode.org上阅读有关事件处理优秀文章.


顺便说一句

<link onclick="doWithThisElement(id_of_this_element)" />
Run Code Online (Sandbox Code Playgroud)

几乎没有意义(<link>是一个只能出现在<head>,绑定事件处理程序(如果可能的话)将无效的元素).

  • 菲利克斯,你能检查我的编辑(`var taget`到`var target`)吗?我以为这是一个错字; 但是我希望你检查一下,我没有搞砸你的例子...... = / (2认同)

mrm*_*oje 7

这是一个非标准跨浏览器的方法,如果你不想传递任何参数,它可能会很有用: -

HTML:

<div onclick=myHandler() id="my element's id">&rarr; Click Here! &larr;</div>
Run Code Online (Sandbox Code Playgroud)

脚本:

function myHandler(){
    alert(myHandler.caller.arguments[0].target.id)
}
Run Code Online (Sandbox Code Playgroud)

演示:http://codepen.io/mrmoje/pen/ouJtk