获取调用函数的元素的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>

我做了我的研究,并作为最后的手段来到SO.我更喜欢不涉及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中使用代码执行此操作的方法:

onmouseover="zoom()"从您的HTML中删除并在您的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(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);
}