Should JavaScript programmers avoid using HTML input buttons for mobile devices?

Question

In HTML I am use to seeing a call to JavaScript functions using input buttons such as:

<input type="button" value="Click Here" onclick="myclick()"></TD>

As I am new to JavaScript, I noticed JavaScript programmers using more things like this:

$(document).ready(function(){
            $("#tapDiv").hide();
...
...
...             
                "onload": function () {
                    $("#tapDiv").show().click(function(){
                        $("#tapDiv").hide();
<div id="tapDiv" style='padding:10px;'>Tap to start.</div>

For mobile devices, is it better to stay away from using HTML input buttons and do what the above JavaScript does? I'm use to using input buttons in HTML for use with PHP programs, but I've notice in JavaScript the programmers don't seem to use them as much, especially when it comes to mobile devices.

Is there a reason for this? Does this give more control over the events on the web page? Is this better for game development? Other benefits I should be aware of as I'm learning JavaScript and jQuery?

No. For semantic value, you should definitely use an `` or even a ` — Bergi, Oct 01 '17 at 21:57
But yes, you should put the event listener in the JS file, and not use `onclick` attributes in your html. — Bergi, Oct 01 '17 at 21:57
(Btw, none of these has to do with mobile devices specifically. It's the best practice for desktop browsers as well) — Bergi, Oct 01 '17 at 21:58
@Bergi Yeah put onClick inside of js+jquery, so anyone who debug your page later (maybe even you) will never find real listener. But you archive clear UI w/o js code. — deathangel908, Oct 01 '17 at 22:05
You should definitely use them if they suit your case. They are created for a reason. In reality though, many people tend to use ``s for buttons because they are easier to remove the styles and maintain a similar semantic definition. — Derek 朕會功夫, Oct 01 '17 at 22:27

Quentin · Accepted Answer · 2017-10-01T22:05:07.597

5

No.

Button elements are designed to be interacted with. By default they come with many benefits such as a look and feel that informs the user they can click them, a natural position in the tab order so people who don't use a pointing device / touch screen can interact with them, and all the semantics that a screen reader can use to tell the user that there is something they can activate.

Div elements are generic block containers. Their job is to contain content when no element with better semantics exists.

That said, there is another significant difference in the two code examples you provided.

Binding event handlers with JavaScript instead of intrinsic event attributes is generally considered best practice.

It separates concerns
It avoids some nasty gotchas
It allows you to use IIFEs to scope your functions to avoid creating globals (which avoids namespace collisions).

None of this is specific to or altered by the existence of mobile devices.

edited Oct 01 '17 at 22:05

answered Oct 01 '17 at 21:59

Quentin

914,110
126
1,211
1,335

Since I'm new to JavaScript, can you please point me to a working example of a binding event handler in JavaScript that you consider to be a best practice? – Edward Coast Oct 02 '17 at 05:45
So what would be the equivalent for a binding event handler on a button, since it shouldn't be onclick? Would this be it? https://www.w3schools.com/js/js_htmldom_eventlistener.asp – Edward Coast Oct 05 '17 at 07:22
1

@EdwardCoast — Yes (if you don't use jQuery as you did in the example in the question), but don't trust W3Schools, they are frequently wrong or misleading. [MDN is a much more trustworthy source](https://developer.mozilla.org/en/addEventListener). – Quentin Oct 05 '17 at 08:23

Should JavaScript programmers avoid using HTML input buttons for mobile devices?

1 Answers1