获取调用函数的元素的ID

Question 1

如何获取称为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的解决方案。

Question 2

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

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

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

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

Question 3

我很惊讶没有人提到this在事件处理程序中使用。它可以在现代浏览器中自动运行，并且可以使其在其他浏览器中运行。如果使用addEventListener或attachEvent安装事件处理程序，则可以使value值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);

Question 4

您可以在事件处理程序中使用“ 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);
}

Question 5

您可以像下面这样编码处理程序设置：

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

然后this在您的处理程序中将引用该元素。现在，我要提供的警告是，我不确定100％知道<area>标签中有处理程序时会发生什么，主要是因为大约<area>十年来我还没有看到标签。我认为它应该为您提供图片标签，但这可能是错误的。

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

再次编辑-没关系，因为您想要该区域的“ id”持续时间。抱歉，无法正确阅读。

Question 6

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

我的意思是您可以做到，但是有很多原因您不应该这样做（如果您想了解详细信息，请阅读不打扰的JavaScript）。

因此，为了满足可能会看到此问题的其他人的利益，这里是jQuery解决方案：

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

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

另一个好处是，每个jQuery处理程序都会收到一个包含大量有用数据的事件对象，例如事件的来源，事件的类型等等，这使得编写所需的代码种类更加容易。

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

Question 7

我也希望这种情况发生，因此只需在调用的函数中传递元素的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";
}

Question 8

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

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

实际作用域this为Window对象。代替：

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

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