CODEWITHSUNDEEP
javascripthtml
ekolis
ekolis

Reputation: 6786

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

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!

Upvotes: 0

Views: 1068

Answers (3)

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92417

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>

Upvotes: 0

ekolis
ekolis

Reputation: 6786

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
    }

Upvotes: 0

Tom O.
Tom O.

Reputation: 5941

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>

Upvotes: 2

Related Questions