​

事件代理中明白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);