How to find where event handler added?

Question

How can I found the trigger codes if there is a button which can do an event but it seems like has no set event handler? For example widget toolbox buttons in bootsrap templates. The buttons have just a class but they are working well.

<a href="javascript:;" class="collapse" data-original-title="" title=""></a>

Where are the codes of this collapse function?

"there is no any set event operation" Have you clicked a submit button? — Teemu, May 25 '15 at 15:27
That's kind of XY problem, you'd have better to search for why any event is bound or explain why this is an issue for you. Maybe your button submit a FORM or whatever... — A. Wolff, May 25 '15 at 15:27
Key word here is "bootstrap" which is what is adding the "collapse" functionality. See https://getbootstrap.com/docs/4.0/components/collapse/ if you're using version 4 or http://bootstrapdocs.com/v3.0.3/docs/javascript/#collapse for version 3 — Wesley Smith, Oct 09 '18 at 19:08

score 7 · Accepted Answer · answered Oct 10 '18 at 21:25

The actual code to animate the collapse is in this scss collapse transition

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

...and the actual transition is set here.

There is javascript that toggles the class states between the following states as documented here:

.collapse - Closed state of the "dropdown" component and the query to know what elements to apply collapse toggle logic to.
.collapsing - Interim state between closed and open in which the css transition is applied.
.collapse.show - Open state of the "dropdown"

I assume that javascript logic is here for showing the "dropdown" when the [data-toggle]=collapse element is clicked in open state. Then the logic for hiding the "dropdown" is here. The show/hide logic is only toggling the css classes to correspond to the states above, which then triggers the css transition above.

Notice the toggle of class on the "dropdown" between clicks

tets

This answer is awesome! Thank you very much. – Serhat MERCAN Oct 11 '18 at 22:04 — Serhat MERCAN, Oct 11 '18 at 22:04

score 1 · Answer 2 · edited May 23 '17 at 12:09

As @A. Wolff said, the default action of a button is to submit a form, which will lead you to another web page, specified on that form.

Have a look at the form element described at W3Schools, you can basically reach the same behaviour using the button element.

If you want to inspect what events are attached to your button, you can right click it and see the elements inspector.

On the image, the Google Chrome's element inspector

If there are no events attached then nothing will be shown, also, if this button belongs to a form, the default action is not considered as a Javascript Event.

If you want to remove all listeners maybe you should take a look to this answer

How to find where event handler added?

2 Answers2

Notice the toggle of class on the "dropdown" between clicks