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?

Yes, don't use inline-events. See addEventListener and (for IE) attachEvent, or, much easier .. jQuery [or your choice of framework] :) — user166390
– user166390, Commented Jul 13, 2012 at 22:13

kapa · Accepted Answer · 2012-07-13 22:13:02Z

2

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

answered Jul 13, 2012 at 22:13

kapa

78.9k21 gold badges166 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tborenst Over a year ago

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 Over a year ago

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)

Community · Accepted Answer · 2017-05-23 10:34:29Z

1

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

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Jul 13, 2012 at 22:25

qwertymk

35.6k31 gold badges127 silver badges184 bronze badges

Collectives™ on Stack Overflow

Adding behavior to a function in JavaScript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related