current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free.
up vote 0 down vote favorite

Working on a dynamic website that loads information from a JSON file and then populates the page with said elements.

My question has to do with event handling - as of now, I don't see any reason as to why I would need to add event handlers inline if I could just use the equivalent jQuery handler in an external script file. I could see the argument where one would say it allows for more control over events, but would that be true?

Here are the two methods I am looking at:

Inline:

<div class="family" onclick="goToFamilyPage()">This Family</div>

External/imported script:

$(document).on('click', '.family', function() {
    //do stuff
});

What would be the benifit of one of these versus the other?

share|improve this question
    
What do you mean by "external script file?" –  Robert Harvey Apr 13 at 16:43
    
@RobertHarvey the script file is an external file imported in the <head> tags like a normal script –  Adjit Apr 13 at 16:46
    
How is that different from an ordinary Javascript file? I'm trying to understand why you're making that distinction with jQuery specifically. –  Robert Harvey Apr 13 at 16:49
    
@RobertHarvey wasn't saying it is. Just letting people know it is an external file as opposed to inline. Also, I would most likely be using a jQuery event handler as opposed to a Javascript one just for ease since I have jQuery imported as well –  Adjit Apr 13 at 16:51
    
For the same reasons that you use jQuery for anything: better cross-browser support, better DOM access, etc. For consistency. –  Robert Harvey Apr 13 at 16:53

2 Answers 2

up vote 0 down vote accepted

It's better to use event handlers. Event handlers keep JavaScript out of your HTML which is usually better for decoupling reasons. The only time in-line JavaScript is okay is if you inject it via a template. This is often done when with React.js because it generates a lot of HTML (which is arguably a template).

share|improve this answer
up vote 0 down vote

According to me, jQuery Event handler is preferable, when you are working with binding dynamic event on basis of certain condition. Ex.

On Employee detail form, there are multiple buttons i.e. Cancel and Save and you are enabling Cancel button on document load and Save button on once user will fill all details of Employee.

If you use javascript event handler,

This Family

in this event handling mechanism, it is difficult to handle conditional event, suppose you want to allow this click event on certain condition then it is difficult to handle this.

But if you use jQuery event handler you can bind() and unbind() events conditionally.

$("#family").unbind("click");

$("#family").bind("click", function(){

});

If you want to enable Save button click event then bind this event other wise unbind so that user won't submit data to server.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.