获取调用函数的元素的ID
我怎样才能得到一个调用JS函数的元素的ID？
body.jpg是一个狗的图像，当用户将他/她的鼠标指向身体不同部位的屏幕时，显示放大的图像。 区域元素的ID与图像文件名减去文件夹和扩展名相同。
<div> <img src="images/body.jpg" usemap="#anatomy"/> </div> <map name="anatomy"> <area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom()"/> </map> <script type="text/javascript"> function zoom() { document.getElementById("preview").src="images/nose.jpg"; } </script> <div> <img id="preview"/> </div> 我已经完成了我的研究，并已经到了最后的手段。 我更喜欢一个不涉及jQuery的解决scheme。
调用时将元素的引用传递给函数：
<area id="nose" onmouseover="zoom(this);" /> <script> function zoom(ele) { var id = ele.id; console.log('area element id = ' + id); } </script>
我很惊讶没有人提到在事件处理程序中使用this 。 它可以在现代浏览器中自动运行，并可以在其他浏览器中运行。 如果使用addEventListener或attachEvent来安装事件处理程序，那么可以将这个值自动分配给创build该事件的对象。
此外，以编程方式安装的事件处理程序的用户允许您从HTML中分离JavaScript代码，这通常被认为是一件好事。
下面是你如何做到这一点在你的代码在纯JavaScript：
从你的HTML中删除onmouseover="zoom()" ，并在你的JavaScript中安装事件处理程序，如下所示：
// simplified utility function to register an event handler cross-browser function setEventHandler(obj, name, fn) { if (typeof obj == "string") { obj = document.getElementById(obj); } if (obj.addEventListener) { return(obj.addEventListener(name, fn)); } else if (obj.attachEvent) { return(obj.attachEvent("on" + name, function() {return(fn.call(obj));})); } } function zoom() { // you can use "this" here to refer to the object that caused the event // this here will refer to the calling object (which in this case is the <map>) console.log(this.id); document.getElementById("preview").src="photos/344290962_h6JjS-Ti.jpg"; } // register your event handler setEventHandler("nose", "mouseover", zoom);
你可以像这样编写处理程序设置：
<area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom.call(this)"/>
然后this在你的处理程序将引用该元素。 现在，我会提出警告，我不能100％确定在<area>标签中有一个处理程序时会发生什么情况，这很大程度上是因为在十年左右的时间里我还没有看到<area>标签。 我认为它应该给你的图像标签，但这可能是错误的。
编辑 – 是的，这是错的 – 你得到<area>标记，而不是<img> 。 所以你必须得到元素的父元素（地图），然后find正在使用它的图像（即“usemap”属性引用地图名称的<img> ）。
再次编辑 – 除了没关系，因为你想要区域的“ID”durr。 对不起，没有正确阅读。
您可以在事件处理程序中使用“this”：
document.getElementById("preview").onmouseover = function() { alert(this.id); }
或者将事件对象传递给handler，如下所示：
document.getElementById("preview").onmouseover = function(evt) { alert(evt.target.id); }
build议使用attachEvent（对于IE <9）/ addEventListener（IE9和其他浏览器）来附加事件。 上面的例子是为了简洁。
function myHandler(evt) { alert(evt.target.id); } var el = document.getElementById("preview"); if (el.addEventListener){ el.addEventListener('click', myHandler, false); } else if (el.attachEvent){ el.attachEvent('onclick', myHandler); }
我知道你不想要一个jQuery的解决scheme，但包括HTML内的JavaScript是一个很大的不是不。
我的意思是你可以做到这一点，但有很多原因你不应该（如果你想了解细节，请阅读不引人注意的javascript）。
因此，为了可能会看到这个问题的其他人的兴趣，这里是jQuery解决scheme：
$(document).ready(function() { $('area').mouseover(function(event) { $('#preview').attr('src', 'images/' + $(event.srcElement).attr('id')); }); });
主要的好处是你不要把javascript代码和HTML混合在一起。 此外，您只需要编写一次，它将适用于所有标签，而不必为每个标签分别指定处理程序。
额外的好处是，每个jQuery处理程序接收一个包含大量有用数据的事件对象，比如事件的来源，事件的types等等，使得编写这些代码变得容易很多。
最后，因为它是jQuery，你不需要考虑跨浏览器的东西 – 一个主要的好处，特别是在处理事件。
