javascript - 在 onmouseover 请求上未定义 ID

Question

我在问一个基本问题：为什么此警报返回未定义？

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是图像元素）运行，但这不会自动转移到处理程序本身进行的任何调用（即调用spettacoliIn）。您需要使用call显式传播上下文。

Answer 4

因为this是window。如果您真的想使用内联事件属性，则需要this在调用函数时显式设置 DOM 元素，您可以从内部执行此操作，onMouseOver因为此时this 是元素：

onMouseOver="spettacoliIn.call(this)"

但是您使用的是 jQuery，那么为什么不将处理程序与 jQuery 绑定，然后this将自动设置为有问题的元素：

$("#spettacoli").on("mouseover", function(e) {
     var element = $(this);
     // do something

});