javascript - 如何在节点上分配新的鼠标事件而不覆盖之前设置的那些？

Question

例子：

domNode.onmouseover = function() {
  this.innerHTML = "The mighty mouse is over me!"
}
domNode.onmouseover = function() {
  this.style.backgroundColor = "yellow";
}

在此示例中，文本不会更改。但问题是我并不总是知道之前分配了什么，所以有没有办法告诉 js：运行最终分配的所有内容而不知道那是什么，然后运行我的函数？

Answer 1

可以通过将当前事件处理程序传递给新处理程序来做到这一点：

domNode.onmouseover = function()
{
    console.log('first handler');
}
domNode.onmouseover = (function (current)
{
    return function()
    {
        current();//call handler that was set when this handler was created
        console.log('new handler');
    };
})(domNode.onmouseover);//pass reference to current handler

看到这个小提琴，看看它在行动
你可以继续这样做，只要你想要/需要：

domNode.onmouseover = function()
{
    console.log('first handler');
}
domNode.onmouseover = (function (current)
{
    return function()
    {
        current();
        console.log('second handler');
    };
})(domNode.onmouseover);
domNode.onmouseover = (function (current)
{
    return function()
    {
        current();
        console.log('third handler');
    };
})(domNode.onmouseover);

这将记录：

first handler
second handler
third handler

这里的所有都是它的！

Answer 2

首先，将它放在一个document.ready中。（不确定你是否这样做）如果你想要一个动作有 2 个动作，请将它放在一次函数中。

您还可以创建 2 个函数并在鼠标悬停时调用它们。

$(document).ready(function(){
   domNode.onmouseover = function() {
     this.innerHTML = "The mighty mouse is over me!"
     this.style.backgroundColor = "yellow";
   }
});