js的事件委托就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素(document)。
有当大量元素需要注册事件时提高性能的作用
eg:
当有大量元素需要注册事件的时候可以用事件委托实现
测试代码
function init() {var d = document.getElementById("test");
d.appendChild(createUl());
console.profile("f1");//火狐测试工具开始
f1();
console.profileEnd("f1");//结束
console.profile("f2");
f2(d);
console.profileEnd("f2");
}
//普通方式注册事件
function f1() {
var ul = document.getElementById("testUl");
for (var i = 0; i < ul.childNodes.length; i++) {
ul.childNodes[i].onclick = click;
}
}
//事件委托
function f2(d) {
d.onclick = function(e) {
//获取点击事件发生时的当前元素
var e = e || window.event;
var target = e.srcElement || e.target;
if (target.tagName == "LI") {
alert(target.innerHTML);
}
}
}
function click() {
alert("1");
}
function createUl() {
var ul = document.createElement("UL");
ul.id = "testUl";
var lis = "";
for (var i = 0; i < 200; i++) {
lis += "<li>" + i + "</li>";
}
ul.innerHTML = lis;
return ul;
}
测试结果:使用事件委托方式性能要高的多
转自:http://www.cnblogs.com/xqhppt/archive/2011/12/07/2279037.html
火狐工具参考:http://www.cnblogs.com/zhenn/archive/2011/02/20/1959186.html