获取调用函数的元素的 ID

Question

如何获取调用 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>

我已经完成了我的研究，并作为最后的手段来到了 Stack Overflow。我更喜欢不涉及 jQuery 的解决方案。

Answer 1

在调用时将元素的引用传递给函数：

<area id="nose" onmouseover="zoom(this);" />

<script>
  function zoom(ele) {
    var id = ele.id;

    console.log('area element id = ' + id);
  }
</script>

Answer 2

我很惊讶没有人提到在事件处理程序中使用this。它在现代浏览器中自动运行，并且可以在其他浏览器中运行。如果您使用addEventListener 或attachEvent 来安装您的事件处理程序，那么您可以使this 的值自动分配给创建事件的对象。

此外，以编程方式安装的事件处理程序的用户允许您将 javascript 代码与 HTML 分开，这通常被认为是一件好事。

以下是在纯 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="http://photos.smugmug.com/photos/344290962_h6JjS-Ti.jpg";
}

// register your event handler
setEventHandler("nose", "mouseover", zoom);

Answer 3

您可以在事件处理程序中使用“this”：

document.getElementById("preview").onmouseover = function() {
    alert(this.id);
}

或将事件对象传递给处理程序，如下所示：

document.getElementById("preview").onmouseover = function(evt) {
    alert(evt.target.id);
}

推荐使用attachEvent(for IE

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);
}

Answer 4

您可以像这样编写处理程序设置：

<area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom.call(this)"/>

然后您的处理程序中的this 将引用该元素。现在，我要提出一个警告，我不能 100% 确定当您在 <area> 标签中有一个处理程序时会发生什么，主要是因为我已经有十年左右没有看到 <area> 标签了.我认为它应该给你图像标签，但这可能是错误的。

edit — 是的，这是错误的 — 你得到的是 <area> 标签，而不是 <img>。因此，您必须获取该元素的父元素（地图），然后找到使用它的图像（即<img>，其“usemap”属性引用地图的名称）。

再次编辑 — 但这并不重要，因为您想要该区域的“id”durr。很抱歉没有正确阅读。

Answer 5

我知道您不想要 jQuery 解决方案，但在 HTML 中包含 javascript 是一个很大的禁忌。

我的意思是你可以这样做，但有很多理由不应该这样做（如果你想了解详细信息，请阅读不显眼的 javascript）。

所以为了其他可能看到这个问题的人的利益，这里是 jQuery 解决方案：

$(document).ready(function() {
  $('area').mouseover(function(event) {
    $('#preview').attr('src', 'images/' + $(event.srcElement).attr('id'));
  });
});

主要好处是您不会将 javascript 代码与 HTML 混合。此外，您只需编写一次，它将适用于所有标签，而不必分别为每个标签指定处理程序。

额外的好处是每个 jQuery 处理程序都会收到一个包含大量有用数据的事件对象 - 例如事件源、事件类型等，从而更容易编写您想要的代码.

最后，由于它是 jQuery，因此您无需考虑跨浏览器的问题——这是一个主要好处，尤其是在处理事件时。

Answer 6

我也希望这种情况发生， 所以只需在被调用函数中传递元素的 id 并在我的 js 文件中使用：

function copy(i,n)
{
 var range = document.createRange();
range.selectNode(document.getElementById(i));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range); 
document.execCommand('copy');
window.getSelection().removeAllRanges();
document.getElementById(n).value = "Copied";
}

Answer 7

对于其他人意外获得 Window 元素，这是一个常见的陷阱：

<a href="javascript:myfunction(this)">click here</a>

实际上将this 限定为Window 对象。而是：

<a href="javascript:nop()" onclick="myfunction(this)">click here</a>

按预期传递a 对象。 （nop() 只是任何空函数。）

Answer 8

如果你像这样设置监听器：

buttons = document.getElementsByClassName("btn-group")
for(let i=0;i<buttons.length;i++){
  buttons[i].addEventListener("click", (e) => { btnClicked(e);},false);
}

那么你可以像这样获取id：

function btnClicked(e){
  console.log(e.target.id)
}