no href, onclick function for html button

Question

I am not too advanced in html and javascript. I am just trying to understand, how skyscanner search flights button works. There is no onclick event or function associated with it. Can anyone help me please?

<button class="fss-bpk-button fss-bpk-button--large js-search-button" tabindex="1" type="button">
    <span class="bpk-text">Search flights</span>
    <span class="bpk-icon-lg bpk-icon-pointer bpk-icon-lg--align-to-button"></span>
</button>

Possible duplicate of [jQuery.click() vs onClick](https://stackoverflow.com/questions/12627443/jquery-click-vs-onclick) — Farhad Bagherlo, Sep 17 '17 at 12:24
They're just using event listeners bound to the button, i.e. `Element.addEventListener`. — Terry, Sep 17 '17 at 12:24

T.J. Crowder · Accepted Answer · 2017-09-17T12:32:16.143

There is no onclick event or function associated with it.

There probably is, it's just:

Added with JavaScript code, not with markup; and/or
On an ancestor element

Most likely #1.

Re #1: Using onclick attributes and such is just one way to put an event handler on a button, and it's a way that's best avoided. Instead, you use modern event handling via addEventListener (or attachEvent on old IE). This might be using the DOM directly, or via a library like jQuery, MooTools, React, Vue, ...

Example using the DOM directly:

document.querySelector(".my-button").addEventListener("click", function() {
  console.log("Click!");
});

<button type="button" class="my-button">Click Me</button>

Re #2: click events bubble from the element on which the user clicked to that element's ancestor elements, all the way up to the document element (html). So you can handle that event on an ancestor element, rather than on the button itself. Handling events on an ancestor element is sometimes called "event delegation."

Example:

document.querySelector(".container").addEventListener("click", function(e) {
  console.log("Click on '" + e.target.textContent + "'!");
});

<div class="container">
  This div contains two buttons. The event handler is on the div, not the buttons.
  <div>
    <button type="button">One</button>
    <button type="button">Two</button>
  </div>
</div>

score 0 · Answer 2 · answered Sep 17 '17 at 12:26

0

The script is probably called on a button holding "js-search-button" class. There is no need to insert onevent handlers within the HTML element if you can use any script to make use of it.

answered Sep 17 '17 at 12:26

N_tonio36

71
4

score 0 · Answer 3 · answered Sep 17 '17 at 12:32

You can attach events using jQuery or JavaScript.

Below way to attach click event to static element.

$('button[class="fss-bpk-button fss-bpk-button--large js-search-button"]').click(function(){
  console.log("clicked!!!");
});

If your element is dynamic then you need to delegate event.

$(document).on('click', 'button[class="fss-bpk-button fss-bpk-button--large js-search-button"]', function(){
  console.log("clicked!!!");
});

Hope this will help you.

no href, onclick function for html button

3 Answers3