Question

Example:

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

In this example the text won’t change, but the thing is also that I don’t always know what was assigned before, so is there a way to tell to js: Run everything that was eventually assigned without knowing what was that and then run my function?

Answer 1

It’s possible to do this by passing the current event handler to the new handler:

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

See this fiddle, to see it in action
You can keep on doing this as much as you want/need:

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);

This will log:

first handler
second handler
third handler

That’s all there is to it!