I have a question which I still haven't found the answer to.

When I use this method to capture a mouse up event:

<div onmouseup="/*Script to be executed*/"></div>

Is that more efficient than this newer method:

<div id="Id"></div>

<script type="text/javascript">

document.getElementById("Id").addEventListener("mouseup", function () { /*Code to be executed here.*/ });

</script>

Or not?

Everyone I know uses addEventListener and I'm the only one using onmouseup. So to settle a little dispute, which method of capturing mouse up events is faster?

Cheers,
Oscar

I have a question which I still haven't found the answer to.

When I use this method to capture a mouse up event:

<div onmouseup="/*Script to be executed*/"></div>

Is that more efficient than this newer method:

<div id="Id"></div>

<script type="text/javascript">

document.getElementById("Id").addEventListener("mouseup", function () { /*Code to be executed here.*/ });

</script>

Or not?

Everyone I know uses addEventListener and I'm the only one using onmouseup. So to settle a little dispute, which method of capturing mouse up events is faster?

Cheers,
Oscar

• javascript
• html
• mouseevent

• 5 It's generally best practice to separate your logic from your dom because it's easier to maintain. – Smern Commented Jul 15, 2013 at 18:00
• @smerny, So you think addEventListener wins over onmouseup because it's more efficient to separate javascript from html. But javascript has been embedded into html for the longest time, why did they not think of that before? And why is it more efficient to separate the two languages? – Oscar Commented Jul 15, 2013 at 18:01
• 1 I don't believe there would be a real difference in speed... it's more about readability and maintainability. I always cringe a bit when I see javascript directly on the dom objects. – Smern Commented Jul 15, 2013 at 18:05
• Ah, so you're not sure which is more efficient. Well I take your point about aesthetics, though I don't care much for it myself. – Oscar Commented Jul 15, 2013 at 18:08
• 1 Oscar, the history of web scripting is made of several layers. addEventListener came later, but removing the former methods is never an option because that might "break the web". – bfavaretto Commented Jul 15, 2013 at 19:55

2 Answers 2

They are equally fast, or if not they are so close it doesn't matter one way or another. The goal is readability.

Suppose you have a card game and you want to drag the card on screen around using the new html5 drag and drop api.

You could write:

<div id="card_1" ondragstart='function(this);' ondragenter='function(this);' ondragover='function(this);' ondragleave='function(this);' class='card'></div>

Or you could write this:

function initialize_event_listeners(){
    var cards = document.getElementsByClassName('card');
    for(var i = 0; i < cards.length; i++){
        cards[i].addEventListener('dragstart', function, false);
        cards[i].addEventListener('dragenter', function, false);
        cards[i].addEventListener('dragover', function, false);
        cards[i].addEventListener('dragleave', function, false);
    }
}

Now say you had 10 cards, and you wanted to drop the native drag and drop support and use something else. In that scenario which would you rather use? Personally I would take the function...

As far as I know (and this might be wrong - which doesn't help you with your dispute) the addEventListener method is more efficient - if so slightly as to make no difference at all. This is because the onmouseup inline method is merely a shortcut to addEventListener. In other words, it is shorthand that points to the same function and sort of writes the addEventListener code in the background anyway. But in general practice it is better, in my opinion, to have your logic separate from your structure for easy reading sake as well as debugging.