How to get all event handler that bind to an element with javascript

Question

How to get all event handlers for an element with javascript ?

for getting event handlers for any element i can use this code

var events =$._data($("#btn").get(0), "events")["click"];

but this code only returns the events which defined as following :

$("#btn").on("click", function(){
    alert(0)
});

$("#btn").on("click", function(){
    alert(1)
});

but this line of code

var events =$._data($("#btn").get(0), "events")["click"];

does not return the events which defined like below :

$("body").on("click", "#btn", function(){
    alert(2)
});

Well, that is the correct result, as in the last case the event handler is not defined on #btn, but on document, and the event only gets there because the event bubbles up to the document level. — trincot
– trincot, Commented Jan 15, 2017 at 14:23
I need that event, whitout knowing about delegateTarget, any way for this exist? — Mohammad Akbari
– Mohammad Akbari, Commented Jan 15, 2017 at 14:35
unfortunately, I don't believe there's a way to do this right now. — Scott Weaver
– Scott Weaver, Commented Jan 15, 2017 at 14:57
Mulltiple event handler bind to an element, and i want conditionally handler call after first handler run, condition need an ajax request for checking some data in server — Mohammad Akbari
– Mohammad Akbari, Commented Jan 15, 2017 at 15:55

trincot · Accepted Answer · 2017-01-16 07:42:33Z

2

You could get the delegated handlers as well by going through the node's parents and checking the handlers there to see if they apply to the node. This is possible because jQuery's data on event handlers also has the selector.

But be aware that this method only lists the handlers that were added via jQuery, not those that were added via the DOM API:

function getHandlers(elem, eventType) {
    return $(elem).parents().addBack().add(document).map(function () {
        return (($._data(this, "events") || {})[eventType] || []).filter(function (e) {
            return !e.selector || $(elem).is(e.selector);
        });
    }).get().concat();
}

$('#btn').on('click', function() {
    console.log('clicked');
});

// This one should not be listed
$('body').on('keyup', function() {
    console.log('key up');
});

$(document).on('click', '#btn', function() {
    console.log('clicked on document');
});

function getHandlers(elem, eventType) {
    return $(elem).parents().andSelf().add(document).map(function () {
        return (($._data(this, "events") || {})[eventType] || []).filter(function (e) {
            return !e.selector || $(elem).is(e.selector);
        });
    }).get().concat();
}

console.log(getHandlers($("#btn"), 'click'));

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">button</button>

edited Jan 16, 2017 at 7:42

answered Jan 15, 2017 at 15:49

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mohammad Akbari Over a year ago

tnx for answer, jquery andself deprecated and is now an alias for .addBack() api.jquery.com/andself

Mohammad Akbari Over a year ago

how get event main delegateTarget?, event.delegateTarget() not work as i expected when i use $("body").on("click", "#btn", ?

trincot Over a year ago

That is a new question. Please use the "Ask Question" button to ask it, providing the code you are trying with, what it does ("does not work as expected" needs explanation), and what you want it to do (provide an example HTML and the desired result for it).

Collectives™ on Stack Overflow

How to get all event handler that bind to an element with javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related