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

Question

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

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

Answer 1

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

var clickHandler = element.onclick;

现在的事件与addEventListener（attachEvent在旧的 IE 中）绑定，它允许每个事件类型有多个处理程序。设置onevent属性只允许一个处理程序，可以被覆盖，通常不是在网页中绑定处理程序的方法。

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

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）