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?
Add a comment
|
5 Answers
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;
Comments
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).
Comments
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;
Comments
How about jQuery click()
$('#MyButton').click(DoSomething);
6 Comments
friedo
You could just use
.click( DoSomething )
Robert Deml
I'm actually using JQuery, but I posted the question as a generic JS question to make it as general as possible.
Gabe
@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.
David Pfeffer
How does JQuery enhance this answer? Your answer is 3 lines, same as the vanilla answer, but 23 KB larger.
Ruan Mendes
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.
|
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.
