Question

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

我正在做这样的事情 -

<link onclick="doWithThisElement(id_of_this_element)" />

Answer 1

您可以直接传递元素，而不是传递ID：

<link onclick="doWithThisElement(this)" />

或者，如果你坚持要传递ID：

<link id="foo" onclick="doWithThisElement(this.id)" />

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

Answer 2

触发事件的元素可能与绑定处理程序的元素不同，因为事件bubble up the DOM tree。

因此，如果您想获取元素的ID，事件处理程序绑定到，您可以使用this.id轻松完成此操作（this引用该元素）

但是如果你想获得事件发起的元素，那么你必须在兼容W3C的浏览器中使用event.target并在IE 8及更低版本中使用event.srcElement访问它

我会避免在onXXXX HTML属性中编写大量JavaScript。我只传递event对象并将代码放在处理程序中（或在额外函数中）中提取元素：

<div onlick="doWithThisElement(event)">

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

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

    var id = target.id;
    //...
}

我建议您阅读excellent articles about event handling at quirksmode.org。

顺便说一下

<link onclick="doWithThisElement(id_of_this_element)" />

几乎没有意义（<link>是一个只能出现在<head>中的元素，绑定事件处理程序（如果可能的话）将没有效果。）

Answer 3

这是一个non-standard但cross-browser方法，如果您不想传递任何参数，这可能很有用： -

HTML：

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

脚本：

function myHandler(){
    alert(myHandler.caller.arguments[0].target.id)
}

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

Answer 4

我建议使用jquery mate。

使用jQuery，您可以通过

获取此元素的id

$（本）.attr（ 'ID'）;

没有jquery，如果我没记错的话，我们曾经用

来访问id

this.id

希望有所帮助：）

Answer 5

使用此：

<link onclick='doWithThisElement(this.attributes["id"].value)' />

在onclick JavaScript的上下文中， this 引用当前元素（在本例中是整个HTML元素链接）。

Answer 6

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="jquery-2.1.0.js"></script> 
<script type="text/javascript" >
function openOnImageClick(event)
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var target = event.target || event.srcElement; // IE

console.log(target);
console.log(target.id);
 var img = document.createElement('img');
 img.setAttribute('src', target.src);
  img.setAttribute('width', '200');
   img.setAttribute('height', '150');
  document.getElementById("images").appendChild(img);


}


</script>
</head>
<body>

<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>

<div id="images" >
</div>

<img id="muID1" src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
<img id="myID2" src="sabaLogo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />

</body>
</html>

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

6 个答案: