javascript - 如何获取 HTML 对象的 onclick？

Question

使用 vanilla JS 我想知道是否可以在 HTML 对象 (div) 上看到 onclick 属性

for (var name in element) {
        if(name == "onclick"){
            // do smt
        }
    }

Answer 1

您可以立即检索 element 的 onclick 属性，而不是枚举 element 的属性:

var clickHandler = element.onclick;

现在的事件与 addEventListener(以及旧版 IE 中的 attachEvent)绑定(bind)，允许每个事件类型有多个处理程序。设置 oneevent 属性仅允许一个处理程序，可以被覆盖，并且通常不是在网页中绑定(bind)处理程序的方式。

不幸的是，如果不编写跟踪它们的包装函数，您将无法检索与 addEventListener (和 attachEvent)绑定(bind)的任何监听器...例如:

var events = [];
function addEvent(element, eventName, callback) {
    element.addEventListener(eventName, callback, false);
    var found = false;
    for (var i = 0; i < events.length; i++) {
        if (events[i].el === element) {
            found = true;
            events[i].list.push(callback);
            break;
        }
    }
    if (!found) {
        events.push({
            el: element,
            list: [callback]
        });
    }
}

function viewEvents(element) {
    for (var i = 0; i < events.length; i++) {
        if (events[i].el === element) {
            return events[i].list;
        }
    }
    return null;
}

你会这样使用它:

var div = document.getElementById("some_id");
addEvent(div, "click", function () {
    console.log("whatever");
});

console.log(viewEvents(div));

(当然，您需要一个 removeEventListener 的包装器，它也可以从 events 中删除处理程序)