It seems there isn't much difference between <a href> and <button> from this other question, but is it also fine to use <div onclick> ?
What is the difference between , , and
Asked
Active
Viewed 895 times
1
jomak73
- 137
- 10
-
onclick on all tags are same
– Muhammad Dyas Yaskur
Jan 06 '20 at 00:59
-
2
It depends on the case, but generally not, since without further changes, it won’t be focusable/activatable with a keyboard and accessibility tools like screen readers won’t call it out as a button. Better to restyle a real `
– Ry-
Jan 06 '20 at 00:59
2 Answers
1
Roughly,
<a href> by default has a click handler that parses the URL and decides on the right sort of action; for HTTP(S) URLs, it will dispatch a HTTP(S) request and replace the window.location with the new URL, and also correctly handle History. It also has other handlers associated with other events, not just click.
<button type="submit"> by default has a click handler that finds out where a form is supposed to be submitted to, constructs the URL in case of a GET method or a request body in case of a POST method, then does the same thing as above.
<... onclick="..."> will invoke the JavaScript code in the onclick attribute if the element is dispatched a click event. This code can do whatever it wants, including (but not limited to) simulating any of the above's response to a click — but you will have to write it yourself. If you would want to simulate everything the above ones do, it would be a lot of work, and the devil is in details. (Also, writing JavaScript code inside HTML attributes is icky; one would do well to bind event handlers from JavaScript code using addEventListener.)
0
<a href=someURL>someText</a> is going to only make the text within the anchor clickable to take you to some URL that you specify
<button (click)='someFunction()'> is different in a couple of ways. In your UI it is going to create a clearly clickable button rather than some underlined text. Clicking the button will then perform some sort of function that you specify that button to perform whether thats a JavaScript/TypeScript function or something else.
<div onClick> is similar to button onClick in that it will perform some sort of function that you write, but it makes the whole division a clickable area rather than simply a button.
Banani720
- 159
- 3
- 17
Asked
Active
Viewed 895 times
1
jomak73
- 137
- 10
-
onclick on all tags are same – Muhammad Dyas Yaskur Jan 06 '20 at 00:59
-
2It depends on the case, but generally not, since without further changes, it won’t be focusable/activatable with a keyboard and accessibility tools like screen readers won’t call it out as a button. Better to restyle a real ` – Ry- Jan 06 '20 at 00:59
2 Answers
1
Roughly,
<a href> by default has a click handler that parses the URL and decides on the right sort of action; for HTTP(S) URLs, it will dispatch a HTTP(S) request and replace the window.location with the new URL, and also correctly handle History. It also has other handlers associated with other events, not just click.
<button type="submit"> by default has a click handler that finds out where a form is supposed to be submitted to, constructs the URL in case of a GET method or a request body in case of a POST method, then does the same thing as above.
<... onclick="..."> will invoke the JavaScript code in the onclick attribute if the element is dispatched a click event. This code can do whatever it wants, including (but not limited to) simulating any of the above's response to a click — but you will have to write it yourself. If you would want to simulate everything the above ones do, it would be a lot of work, and the devil is in details. (Also, writing JavaScript code inside HTML attributes is icky; one would do well to bind event handlers from JavaScript code using addEventListener.)
0
<a href=someURL>someText</a> is going to only make the text within the anchor clickable to take you to some URL that you specify
<button (click)='someFunction()'> is different in a couple of ways. In your UI it is going to create a clearly clickable button rather than some underlined text. Clicking the button will then perform some sort of function that you specify that button to perform whether thats a JavaScript/TypeScript function or something else.
<div onClick> is similar to button onClick in that it will perform some sort of function that you write, but it makes the whole division a clickable area rather than simply a button.
Banani720
- 159
- 3
- 17