Javascript 如何将触发 `onclick` 事件的元素的 id 传递给事件处理函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6575210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass the id of an element that triggers an `onclick` event to the event handling function
提问by Rajat Gupta
How do I pass the id of an element that triggers an onclickevent to the event handling function.
如何将触发onclick事件的元素的 id 传递给事件处理函数。
I am doing something like this-
我正在做这样的事情-
<link onclick="doWithThisElement(id_of_this_element)" />
回答by jbrookover
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/
回答by Felix Kling
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(thisrefers to the element).
因此，如果您想获取事件处理程序绑定到的元素的 ID ，您可以使用this.id(this指元素)轻松完成此操作。
But if you want to get the element where the event originated, then you have to access it with event.targetin W3C compatible browsers and event.srcElementin IE 8 and below.
但是如果你想获取事件起源的元素，那么你必须event.target在兼容 W3C 的浏览器和event.srcElementIE 8 及更低版本中访问它。
I would avoid writing a lot of JavaScript in the onXXXXHTML attributes. I would only pass the eventobject and put the code to extract the element in the handler (or in an extra function):
我会避免在onXXXXHTML 属性中编写大量 JavaScript 。我只会传递event对象并将代码放在处理程序中（或在额外的函数中）以提取元素：
<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).
几乎没有意义（<link>是一个只能出现在 中的元素<head>，绑定事件处理程序（如果可能的话）将不起作用）。
回答by mrmoje
Here's a non-standardbut cross-browsermethod that may be useful if you don't want to pass any arguments:-
这是一个非标准但跨浏览器的方法，如果您不想传递任何参数，它可能很有用：-
Html:
网址：
<div onclick=myHandler() id="my element's id">→ Click Here! ←</div>
Script:
脚本：
function myHandler(){
alert(myHandler.caller.arguments[0].target.id)
}
回答by Oliver M Grech
I would suggest the use of jquery mate.
我建议使用 jquery mate。
With jQuery you would then be able to get the id of this element by
使用 jQuery，您将能够通过以下方式获取此元素的 id
$(this).attr('id');
$(this).attr('id');
without jquery, if I remember correctly we used to access the id with a
没有 jquery，如果我没记错的话，我们曾经使用
this.id
这个.id
Hope that helps :)
希望有帮助:)
回答by Saeed Neamati
Use this:
用这个：
<link onclick='doWithThisElement(this.attributes["id"].value)' />
In the context of the onclick JavaScript, thisrefers to the current element (which in this case is the whole HTML element link).
在 onclick JavaScript 的上下文中，this指的是当前元素（在本例中是整个 HTML 元素link）。
回答by Arun
<!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>
