没有href，html按钮的onclick函数

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>

Answer 1

There is no onclick event or function associated with it.

There probably is, it's just:

1. Added with JavaScript code, not with markup; and/or

2. 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> 

Answer 2

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.

Answer 3

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.