您可以像这样在 POJS 中执行此操作,这应该是跨浏览器兼容的,并且不使用任何 3rd 方库。另一个优点是命名类的每个元素只有一个事件侦听器,使用事件传播。
Javacsript
/*jslint maxerr: 50, indent: 4, browser: true */
/*global alert */
(function () {
"use strict";
function addEvent(elem, event, fn) {
if (typeof elem === "string") {
elem = document.getElementById(elem);
}
function listenHandler(e) {
var ret = fn.apply(null, arguments);
if (ret === false) {
e.stopPropagation();
e.preventDefault();
}
return ret;
}
function attachHandler() {
window.event.target = window.event.srcElement;
var ret = fn.call(elem, window.event);
if (ret === false) {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
return ret;
}
if (elem.addEventListener) {
elem.addEventListener(event, listenHandler, false);
} else {
elem.attachEvent("on" + event, attachHandler);
}
}
function whichElement(e) {
var target = e.target;
if (target.tagName === "A" && target.parentElement.tagName === "LI" && target.parentElement.parentElement.className === "list-class") {
alert("The " + target.firstChild.nodeValue + " Link has been clicked");
}
}
addEvent(document.body, "click", whichElement);
}());
在jsfiddle 上
如果您使用一些较新/自定义的 HTML 标记或 XML,那么您可能需要考虑tagName 区分大小写,并编写以下内容以确定。
if (target.tagName.toUpperCase() === "A" && target.parentElement.tagName.toUpperCase() === "LI" && target.parentElement.parentElement.className === "list-class") {
在 jquery 术语中,上面可以写成
Javascript
$(document).on('click', '.list-class>li>a', function (e) {
alert("The " + e.target.firstChild.nodeValue + " Link has been clicked");
});
在jsfiddle 上
在 jquery 中,他们称之为事件委托。