event listeners vs. event handlers

Question

Possible Duplicate:
JavaScript Event Listeners vs Event Handlers
element.onload vs element.addEventListener(“load”,callbak,false)

I've read this question but it's still unclear to what's the difference between

<input type="button" onclick="call_function();" />

And

$(function() {
    $("#my_button").click(function() {
        call_function();
    });
});
<input type="button" id="my_button" />

The first one is an event handler and the second one is an event listener, am I right?

Is one way better than the other and why? Which one is better at handling graceful degradation?

Check out my answer here: http://stackoverflow.com/questions/6902033/element-onload-vs-element-addeventlistenerload-callbak-false/6902073#6902073 — Chris Baker, Sep 21 '11 at 22:19
Same question as this: http://stackoverflow.com/questions/2215379/javascript-event-listeners-vs-event-handlers — adamjmarkham, Sep 21 '11 at 22:22
@adamjmarkham I thought I made it clear that I read that question already. — Aillyn, Sep 21 '11 at 22:23
How about the one I posted? Pretty much the same idea, but maybe explained in a different way? — Chris Baker, Sep 21 '11 at 22:24
Whoops sorry, didn't read it properly. Hope you get your answer. — adamjmarkham, Sep 21 '11 at 22:39

score 3 · Accepted Answer · answered Sep 21 '11 at 22:20

3

Functionally speaking there is no difference. In both cases the method call_function will be invoked when the given button element is clicked.

Stylistically though there is a big difference. The latter example is considered more robust by many because it allows the developer to separate out the 3 parts of at HTML page into completely different items

HTML page: Contains the data of the page
CSS stylesheet: Determines how the data is displayed
Javascript: Provides the behavior

This is possible in the second example because the javascript behavior is hooked up independently of the definition of the button. This allows for the HTML to be defined completely independent of the associated javascript. They can be in separate files, written by separate people and for the most part mutated independently. There are some restrictions (like don't change id fields) but overall it gives a large degree of freedom between the logically different pieces of the display.

answered Sep 21 '11 at 22:20

JaredPar

733,204
149
1,241
1,454

So it's more for separation of concerns than anything else? I know it won't make a difference for the end user, but does it make it any easier on the programmer? – Aillyn Sep 21 '11 at 22:24
@pessimopoppotamus that is a significant part of the difference – JaredPar Sep 21 '11 at 22:24
1

if you were to change the name of the function that is raised on the click event, you would have to go back to the html code and change the value of the onclick="" – Cory Danielson Sep 21 '11 at 22:40
If you were minifying your javascript to make the js slug size smaller you would want it in your javascript code instead of inline on click. Also if you were considering Namespacing your js to avoid defining object to the global scope it would be better to define the click event in your js. Another reason would be because of security. It is much easier to edit an onclick attribute using firebug than editing javascript code – Keith.Abramo Sep 21 '11 at 22:45
Note that separation of concerns has its own overhead: on my current project yesterday I found ID-specific CSS in the stylesheet for elements that had been removed from the HTML, and some leftover CSS classes that were no longer referenced anywhere either, with JS that was broken because it assumed those elements existed - changes made by three different people none of whom looked at the big picture. (Not that I'm saying you shouldn't separate.) – nnnnnn Sep 22 '11 at 01:00

score 1 · Answer 2 · answered Sep 21 '11 at 22:25

Event handler is a function or other chunk of code that is invoked by browser in response to specific event.

Event listener, in the given context, is a higher level abstraction introduced by javascript library (jquery here) and what this library will do for you is creating event handler that would call some code that will go over listeners and call them one by one. So jquery hides from you the logic of maintaining a list of listener functions and calling them.

event listeners vs. event handlers

2 Answers2

Linked