javascript - 如何使用javascript获取绑定(bind)到元素的所有事件处理程序

Question

如何使用 javascript 获取元素的所有事件处理程序？

我可以使用这段代码获取任何元素的事件处理程序

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

但是这段代码只返回定义如下的事件:

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

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

但是这行代码

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

不返回定义如下的事件:

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

Answer 1

您也可以获取委托(delegate)的处理程序，方法是遍历节点的父节点并检查那里的处理程序以查看它们是否适用于该节点。这是可能的，因为 jQuery 的事件处理程序数据也有选择器。

但请注意，此方法仅列出通过 jQuery 添加的处理程序，而不是通过 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>