事件代理中明白ul li中的index。


var targetNode = document.getElementById('list').getElementsByTagName('li');
var i = 0;
var targetLength = targetNode.length;
for (i; i < targetLength; i++) {
targetNode[i].onclick = (function(num) {
return function() {
alert(num);
}
})(i);
}




window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
var that=target;
var index;
for(var i=0;i<aLi.length;i++)if(aLi[i]===target)index=i;
if(index>=0)alert('我的下标是第'+index+'个');
target.style.background = "red";
}

}


}


我以前只知道jquery的detegate方法可以给已知元素和未知元素添加事件,现在看看on这个方法的时候,也就知道了。


$("ul").delegate("li", "click", function () {
alert($(this).text());
});


on的参数和delete的参数是相反的。


$('#data-list').on('click', 'li', function() {
$('#data-show').html($(this).html());
});


live已经放弃了

bind与delegate 与on

bind绑定就是50的话,绑定50个,不能对未来的元素绑定,所以和普通的click方法是一样的。

delegate的话,可以对未来的元素绑定,亦可以代理。

on更全面一些。

只能说这是一篇很好的文章:​​http://www.jb51.net/article/67166.htm​

js原生的事件代理:

​https://www.douban.com/note/466024519/?type=like​

自己第一次写原生的事件代理:


<ul id='list'>
<li>first</li>
<li>second</li>
<li>third</li>
<li>four</li>
<li>five</li>
</ul>



function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);//DOM2.0
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);//IE5+
return r;
}
else {
elm['on' + evType] = fn;//DOM 0
}
}
var ss = $('#list')[0];
var box =function(){
alert(this.innerHTML);
}
addEvent(ss,'click',box);


不过这个chrome和IE下this只的ul。

这个原生的你看下:http://www.xiaobai8.com/Blog/464.html

上边的这个还是没有解决在父类代理的情况下,怎么获取li的索引的问题 ,获取当前li的this的问题。

下面自己写的这个解决了获得this的问题,但是没有解决索引的问题。我们可以又获取到的dom对象变为jquey对象获取索引方法。


function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);//DOM2.0
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);//IE5+
return r;
}
else {
elm['on' + evType] = fn;//DOM 0
}
}
var ss = $('#list')[0];
var box =function(e){
var ev= e || window.e;
var target=ev.target||ev.srcElement;//事件源
var $li=target.nodeName.toLowerCase();
if($li==="li"){
alert(target.innerHTML);
};
}
addEvent(ss,'click',box);