Không có gì sai với thiết lập này (hoặc có?), Nhưng tôi có thể làm cho nó một chút được không?
Thay vào đó, hãy xem việc sử dụng ủy quyền sự kiện. Đó là nơi bạn thực sự theo dõi sự kiện trên một vùng chứa không biến mất, sau đó sử dụng event.target(hoặcevent.srcElement trên IE) để tìm ra nơi thực sự xảy ra sự kiện và xử lý nó một cách chính xác.
Bằng cách đó, bạn chỉ đính kèm (các) trình xử lý một lần và chúng tiếp tục hoạt động ngay cả khi bạn hoán đổi nội dung.
Dưới đây là một ví dụ về ủy quyền sự kiện mà không cần sử dụng bất kỳ libs trợ giúp nào:
(function() {
var handlers = {};
if (document.body.addEventListener) {
document.body.addEventListener('click', handleBodyClick, false);
}
else if (document.body.attachEvent) {
document.body.attachEvent('onclick', handleBodyClick);
}
else {
document.body.onclick = handleBodyClick;
}
handlers.button1 = function() {
display("Button One clicked");
return false;
};
handlers.button2 = function() {
display("Button Two clicked");
return false;
};
handlers.outerDiv = function() {
display("Outer div clicked");
return false;
};
handlers.innerDiv1 = function() {
display("Inner div 1 clicked, not cancelling event");
};
handlers.innerDiv2 = function() {
display("Inner div 2 clicked, cancelling event");
return false;
};
function handleBodyClick(event) {
var target, handler;
event = event || window.event;
target = event.target || event.srcElement;
while (target && target !== this) {
if (target.id) {
handler = handlers[target.id];
if (handler) {
if (handler.call(this, event) === false) {
if (event.preventDefault) {
event.preventDefault();
}
return false;
}
}
}
else if (target.tagName === "P") {
display("You clicked the message '" + target.innerHTML + "'");
}
target = target.parentNode;
}
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
})();
Ví dụ trực tiếp
Lưu ý cách nếu bạn nhấp vào các thông báo được thêm động vào trang, nhấp chuột của bạn sẽ được đăng ký và xử lý mặc dù không có mã nào để nối các sự kiện trên các đoạn mới được thêm vào. Cũng lưu ý rằng trình xử lý của bạn chỉ là các mục nhập trong bản đồ và bạn có một trình xử lý trên document.bodyđó thực hiện tất cả việc điều động. Bây giờ, bạn có thể bắt nguồn từ điều này vào một cái gì đó được nhắm mục tiêu nhiều hơn document.body, nhưng bạn có được ý tưởng. Ngoài ra, ở phần trên, về cơ bản chúng tôi sẽ điều chỉnh id, nhưng bạn có thể thực hiện kết hợp phức tạp hoặc đơn giản tùy thích.
Các thư viện JavaScript hiện đại như jQuery , Prototype , YUI , Closure hoặc bất kỳ thư viện nào khác sẽ cung cấp các tính năng ủy quyền sự kiện để giải quyết các khác biệt của trình duyệt và xử lý các trường hợp cạnh một cách rõ ràng. jQuery chắc chắn có, với cả nó livevà các delegatechức năng, cho phép bạn chỉ định các trình xử lý bằng cách sử dụng đầy đủ các bộ chọn CSS3 (và sau đó là một số).
Ví dụ: đây là mã tương đương bằng cách sử dụng jQuery (ngoại trừ tôi chắc chắn rằng jQuery xử lý các trường hợp cạnh mà phiên bản thô off-the-cuff ở trên không):
(function($) {
$("#button1").live('click', function() {
display("Button One clicked");
return false;
});
$("#button2").live('click', function() {
display("Button Two clicked");
return false;
});
$("#outerDiv").live('click', function() {
display("Outer div clicked");
return false;
});
$("#innerDiv1").live('click', function() {
display("Inner div 1 clicked, not cancelling event");
});
$("#innerDiv2").live('click', function() {
display("Inner div 2 clicked, cancelling event");
return false;
});
$("p").live('click', function() {
display("You clicked the message '" + this.innerHTML + "'");
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
})(jQuery);
Bản sao trực tiếp