js事件代理

需要注意的blog:http://blog.csdn.net/majian_1987/article/details/8591385

一篇博客看懂  http://blog.csdn.net/majian_1987/article/details/8591385

事件代理中明白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原生的事件代理：

http://www.oschina.net/question/54100_25614

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