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

通过遍历节点的父节点并检查那里的处理程序以查看它们是否适用于节点，您也可以获得委派的处理程序。这是可能的，因为事件处理程序上的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();
}

＆＃13;

$('#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'));

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: