How can an HTML button do anything without an onclick event handler?

Question

I can't figure out how these buttons are doing anything...

<div class="ui-dialog-buttonset"> <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"> <span class="ui-button-text">Cancel</span> </button> <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"> <span class="ui-button-text">Save</span> </button> </div>

I want to see the code that they execute to cancel and save but there are no event handlers, so I can't figure out where the code lives... is there some secret place it could be hiding? I'm really confused!

I know. I'm wondering if there's someplace the code that the buttons execute might be hiding, because I can't find any event handlers on the buttons. I was hoping that someone might know of some common trick to execute code on a button click without an event handler that I might be unaware of... — ekolis
– ekolis, Commented Aug 19, 2019 at 19:48
Not having an onclick does not mean there is no event-handler, it just implies that the event-handling is using an unobtrusive technique, such as EventTarget.addEventListener(). — David Thomas
– David Thomas, Commented Aug 19, 2019 at 19:48
The developer tools in Mozilla Firefox will show you attached events.. to figure out which handler is called — Wolfgang
– Wolfgang, Commented Aug 19, 2019 at 19:51
Which UI frameworks are being used here? knowing which frameworks are being used may help us point you to where these events are defined. — scunliffe
– scunliffe, Commented Aug 19, 2019 at 19:51

Tom O. · Accepted Answer · 2019-08-19 20:00:34Z

The developer probably used addEventListener method instead of inline HTML handlers. When you do it this way, the event listener is added directly in the JavaScript (no need to mark-up the HTML at all).

Also, it's important to mention event delegation. If you implement this technique then each individual button would not need it's own handler - you can simply create one event handler function, apply it to a parent DOM element, and then inspect the e.target to access to the element from which the event began propagating.

Something like this, for example:

const onClick = e => console.log(`You clicked ${e.target.textContent}`); document.querySelector('div').addEventListener('click', onClick);

<div class="ui-dialog-buttonset"> <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"> <span class="ui-button-text">Cancel</span> </button> <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"> <span class="ui-button-text">Save</span> </button> </div>

You may want to reference JQuery's method of event attachment through .on("click", ƒ) or .click(ƒ) since the OP mentioned it specifically in his comments. @ekolis if you're using JQuery you'll want to tag this question and mention it within the question itself.
Hi ekolis - can you elaborate? You see what happening inside of jQuery? If you have additional code you could add to the question it might make it easier to find out specifically what's happening.

ekolis · Accepted Answer · 2019-08-19 20:41:18Z

I found a script, thought I'm not sure where it's actually coming from because it has a cryptic name "VM9850:formatted". Anyway, it contains this code which appears to be event handlers for the buttons:

 buttons: { Cancel: function() { cdg(); }, Save: function() { // etc }

this is not an answer, might be an appendix to the question.

Kamil Kiełczewski · Accepted Answer · 2024-02-05 16:24:20Z

Aswer to title question:

Buttons actually can do some actions without using JS event handlers e.g. display some message

.msg { display: none } .cancelBtn:focus + .msg{ display: block; } .saveBtn:focus + .msg{ display: block; }

<div class="ui-dialog-buttonset"> <button type="button" class="cancelBtn" role="button"> <span class="ui-button-text">Cancel</span> </button> <div class="msg">You choose CANCEL!</div><br> <button type="button" class="saveBtn" role="button"> <span class="ui-button-text">Save</span> </button> <div class="msg">You choose SAVE!</div> </div>

Or submit form

<form action="/action_page.php" method="get" id="form1"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> </form> <button type="submit" form="form1" value="Submit">Submit</button>

Collectives™ on Stack Overflow

How can an HTML button do anything without an onclick event handler?

3 Answers 3

3 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Related