Adding behavior to a function in JavaScript?

Question

Say I am writing a web-app, and I'd like to add certain behavior to a function after it has been declared in multiple places without overriding the old behaviors of the function.

Here is some simplified code (notice the window.onmousedown function

var createMenu = function(){
 var menu = document.createElement('ul');
 /* add things to the menu */
 window.onmousedown = function(e){
 menu.style.background = "red";
 }
}
var createSidebar = function(){
 var sidebar = document.createElement('div');
 /* add things to the sidebar */
 window.onmousedown = function(e){
 sidebar.id = "clicked";
 }
}
var createMenu();
var createSidebar();

In this case, window.onmousedown will not do both things it was meant to do - the definition it has in createSidebar will override its definition from createMenu. Is there a standard way of achieving a sort of behavior in which windows.onmousedown will retain both behaviors?

• user166390: Yes, don't use inline-events. See addEventListener and (for IE) attachEvent, or, much easier .. jQuery [or your choice of framework] :)

Answer 1

Use addEventListener() to add your events. It allows you to register multiple event handlers for an event on an element. Forget the old event model that you are using in your example.

For IE8 and older, you will have to use attachEvent().

Advanced event registration models on Quirksmode

• tborenst: Thank you! This was definitely a gap in my knowledge, and I will start using event listeners from now on. Do you know if there is a "click" event equivalent for touch devices? For now I have to use menu.ontouchstart = doStuff() - is this considered bad practice?
• kapa: touchstart should be fine, afaik - just attach it with the advanced event model. A library like jQuery can help a lot with attaching and managing event handlers, because it hides browser differences. (and I'm sure you meant simply doStuff without parentheses)

Answer 2

It's not a best practice but you can do something like this:

var createMenu = function(){
 var menu = document.createElement('ul');
 /* add things to the menu */
 window.onmousedown = function(e){
 menu.style.background = "red";
 }
}
var createSidebar = function(){
 var sidebar = document.createElement('div');
 var oldonmousedown = window.onmousedown;
 /* add things to the sidebar */
 window.onmousedown = function(e){
 sidebar.id = "clicked";
 oldonmousedown()
 }
}
var createMenu();
var createSidebar();

But you should be using addEventListener() or attachEvent() like in bažmegakapa's answer