如何使用 Javascript 更改 onmouseover 事件？答案

【问题标题】：How do I change an onmouseover event using Javascript?如何使用 Javascript 更改 onmouseover 事件？
【发布时间】：2009-08-19 00:29:05
【问题描述】：

我有一个 HTML 跨度，它改变了它的 onmouseover 和 onmouseout 类：

<span id="someSpan" class="static" onmouseover="this.className='active'" onmouseout="this.className='static'">Some Text</span>

我希望能够使用页面上其他地方调用的 Javascript 函数启用和禁用（更改）onmouseover 和 onmouseout 事件。这可能吗？

【问题讨论】：

标签： javascript

【解决方案1】：

当然。

document.getElementById('someSpan').onmouseover = 
     function() { 
         this.className='newactive'; 
     };

【讨论】：

谢谢，我愿意接受这个答案和 Jason 的。这符合我的原型的需要，但稍后我将研究如何使用 JQuery 来实现。

【解决方案2】：

安全的方法是使用像 Prototype 或 JQuery 这样的 Javascript 工具包。

他们都可以轻松地做这样的事情，但它可以跨浏览器工作。

例如，here is how you do it in JQuery。

【讨论】：

【解决方案3】：

我同意 jQuery 会更简单，但如果你想坚持使用 JavaScript，我相信这应该可行：

document.getElementById("elementId").onMouseOut=functionName;

此外，jQuery 的大小约为 20Kb（生产框架文件的大小），因此它可能会减慢页面的加载速度。如果您只是将它用于一些可以在 JavaScript 中完成的事情，则需要考虑一些事情。

【讨论】：

【解决方案4】：

是的，您可以简单地通过为 span 分配 Element 实例的 onmouseover 和 onmouseout 属性来做到这一点，例如：

// Define your handler somewhere
function myNewHandler()
{
    // ...new logic...
}

// And where you want to swap it in:
document.getElementById('someSpan').onmouseover = myNewHandler;

...但这是一种相当老式的方法。一种更现代的方法使用 addEventListener 或 attachEvent（取决于您使用的是标准还是 IE）来连接事件处理程序。 Prototype、jQuery 和其他十几个库可以提供帮助。

【讨论】：

【解决方案5】：

代码：

document.getElementById("someSpan").onmouseover = function()
{
    //New code
};//Do not forget the semicolon

【讨论】：