在onmouseover请求上未定义Id

Question

我问一个基本问题：为什么这个警报会返回undefined？

HTML

<div id="spettacoli_div">
<img id="spettacoli" src="grafica/spettacoli.png" onMouseOver="spettacoliIn()">
</div>

JS

function spettacoliIn(){
var comparendo = $(this).attr('id');
alert(comparendo);

}

Answer 1

这是因为该函数是由窗口而不是元素调用的。传递参数或捕获事件参数

function spettacoliIn (e) {
  // catch the event parameter
  var comparendo = (e || window.event).target.id;
  alert(comparendo);  
}

Answer 2

<div id="spettacoli_div">
<img id="spettacoli" src="grafica/spettacoli.png" onMouseOver="spettacoliIn(this)">
</div>

会奏效。 onMouseOver不会为jQuery提供有关当前DOM元素的信息。

将您的spettacoliIn方法更改为

function spettacoliIn(domElem){
   var elem = $(domElem);
   var comparendo = elem.attr('id');
   alert(comparendo);
}

Answer 3

因为在调用函数时，上下文（this）等于全局对象（window），而window没有id。

而不是这样做，

<img id="spettacoli" src="..." onMouseOver="spettacoliIn.call(this)">

用作mouseover事件的内联处理程序的代码使用正确的上下文运行（this是图像元素），但这不会自动转移到处理程序本身所做的任何调用（即调用{ {1}}）。您需要使用call显式传播上下文。

Answer 4

因为this是window。如果你真的想使用内联事件属性，你需要在调用函数时明确地将this设置为DOM元素，你可以在onMouseOver内部做，因为那时{{1} 是元素：

this

但是你正在使用jQuery，那么为什么不用jQuery绑定处理程序，然后onMouseOver="spettacoliIn.call(this)" 将自动设置为有问题的元素：

this