I have a button in html:
<button id="MyButton" onclick="return DoSomething()">Click Me</button>
Is it better to put the "onclick" property in the html or use javascript/DOM to attach a callback to the button click?
views:
83answers:
5
+6
A:
It's considered better to attach it via JavaScript. This falls under the category of "Unobtrusive JavaScript". (more specifically here the separation of behavior from the layout)
document.getElementById('YourID').onclick = nameOfFunctionToBeCalled;
RC
2010-02-16 18:51:00
You could just use `.click( DoSomething )`
friedo
2010-02-16 18:53:57
I'm actually using JQuery, but I posted the question as a generic JS question to make it as general as possible.
Robert
2010-02-16 18:55:41
@David Pfeffer, well it makes things a lot easier and compressed it's not that "large". If you want to rub two sticks together for the rest of your coding life go ahead. I will post jQuery for answers if I feel like it's warranted. The down vote is appreciated. I stand by my answer.
gmcalab
2010-02-16 18:56:40
How does JQuery enhance this answer? Your answer is 3 lines, same as the vanilla answer, but 23 KB larger.
David Pfeffer
2010-02-16 19:00:12
@David Pfeffer, just a guess but I'm sure he has more than one button and event handler he will need to bind, not to mention all the other DOM calls that are simplified with the use of jQuery. His question was generalized, meaning he would most likely be implementing this in multiple spots.
gmcalab
2010-02-16 19:05:38
I think if you are going to post an answer that uses a lib, you must explain why you can't do it with plain js, or why it's much easier, or why it's more maintainable.For a minimalist answer, no jquery is required. However, as mentioned by gmcalab, the asker wants to use this for all elements with handlers.Since I use ext, I would have told them that Ext.addBehaviors is great for that, and would have suggested that they should implement something like Ext.addBehaviors if this is going to be widely used and they don't want a library.
Juan Mendes
2010-02-16 19:24:44
+2
A:
It's a better practice to do this purely from within Javascript, and keep your markup clean. If you're using a separate .js file, this also saves you from having to worry about issues with inline JS code inside HTML.
Using raw DOM it's pretty simple:
document.getElementById( "MyButton" ).onclick = DoSomething;
friedo
2010-02-16 18:53:25
+3
A:
Favoring separation of presentation and logic, I'd suggest you bind events to it via the Javascript:
document.getElementById("MyButton").onclick = function(){
alert("Button Clicked");
}
Keep your Javascript and CSS out of your HTML, and you'll be a happier developer. This method allows your programmers to write the Javascript, and your Designers to build the structure and styling. You don't want to put programming into the hands of a designer (which is what happens with inline javascript).
Jonathan Sampson
2010-02-16 18:53:49
+1
A:
I use the ondomready event to assign all my events, normally squirreled away in a separate script. All my logic is in one place and my markup looks a lot tidier too. I hold the view that markup is merely there to describe the initial structure of the page. Code lives in a code file, and styles belong in a css file.
Paul Alan Taylor
2010-02-16 18:54:02