js 委托事件的实现

测试代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

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;         }

 测试结果：使用事件委托方式性能要高的多

<div id="test_id">

<a href="#" id="11">111111</a>

<a href="#" id="22">222222</a>

<a href="#" id="33">333333</a>

<a href="#" id="44">444444</a>

<a href="#" id="55">555555</a>

<a href="#" id="66">666666</a>

<a href="#" id="77">777777</a>

</div>

 

1、jquery实现：

 

$("#test_id").delegate("a", "click", function(event){

var event = event || window.event;

$("#test_id").find("a").each(function(){

$(this).removeClass("current");

});

$(event.target).addClass("current");

});

 

2、js实现：

 

var obj = document.getElementByIdx_x("test_id");

 

obj.addEventListener("click", function(event){

var event = event || window.event;

for(var i=0; i<this.childNodes.length; i++){

if(this.childNodes[i].nodeName.toLowerCase() == 'a'){

this.childNodes[i].className = '';

}

}

var curElem = event.target;

if(curElem.nodeName.toLowerCase() == "a"){

curElem.className = "current";

}

});

 

原文链接：http://www.cnblogs.com/xqhppt/archive/2011/12/07/2279037.html