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

How do I pass the id of an element that triggers an onclick event to the event handling function.

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

I am doing something like this-

我正在做这样的事 -

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

6 个解决方案

#1

102

Instead of passing the ID, you can just pass the element itself:

您可以只传递元素本身，而不是传递ID：

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

Or, if you insist on passing the ID:

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

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

Here's the JSFiddle Demo: http://jsfiddle.net/dRkuv/

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

#2

The element that triggered the event can be different than the one you bound the handler to because events bubble up the DOM tree.

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

So if you want to get the ID of the element the event handler is bound to, you can do this easily with this.id (this refers to the element).

因此，如果要获取事件处理程序绑定的元素的ID，可以使用this.id轻松完成此操作（这指的是元素）。

But if you want to get the element where the event originated, then you have to access it with event.target in W3C compatible browsers and event.srcElement in IE 8 and below.

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

I would avoid writing a lot of JavaScript in the onXXXX HTML attributes. I would only pass the event object and put the code to extract the element in the handler (or in an extra function):

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

<div onlick="doWithThisElement(event)">

Then the handler would look like this:

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

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

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

I suggest to read the excellent articles about event handling at quirksmode.org.

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

Btw

顺便说一句

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

does hardly make sense (<link> is an element that can only appear in the <head>, binding an event handler (if even possible) will have no effect).

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

#3

Here's a non-standard but cross-browser method that may be useful if you don't want to pass any arguments:-

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

Html:

HTML：

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

Script:

脚本：

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

Demo: http://codepen.io/mrmoje/pen/ouJtk

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

#4

I would suggest the use of jquery mate.

我建议使用jquery配合。

With jQuery you would then be able to get the id of this element by

使用jQuery，您就可以获得此元素的id

$(this).attr('id');

$（本）.attr（ '身份证'）;

without jquery, if I remember correctly we used to access the id with a

没有jquery，如果我没记错的话我们曾经用a访问id

this.id

this.id

Hope that helps :)

希望有所帮助:)

#5

Use this:

用这个：

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

In the context of the onclick JavaScript, this refers to the current element (which in this case is the whole HTML element link).

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

#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>

#1

102