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