事件委托

事件委托也称事件代理。

这里举一个例子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台收到快递后，她会判断收件人是谁，然后按照收件人的要求签收。这种方案还有一个优势，那就是即使公司里来了新员工，前台也会在收到寄给新员工的快递后核实并代为签收

这里其实还有2层意思：

第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；

第二，新员工也是可以被前台代为签收的，即程序中新添加的dom节点也是有事件的。

原理：事件委托是利用事件的冒泡原理来实现的，事件冒泡就是事件从最深的节点开始，然后逐步向上传播事件。比如：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

实现：

css：

ul{

    background: yellow;

}  

li{

    border: 1px solid gray;

    width: 500px;

    height: 30px;

}

html：

<ul>

    <li>0</li>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

    <li>7</li>

</ul>

js：

var ul = document.getElementsByTagName("ul")[0];   

//var ul = document.querySelector("ul");

/*

var lis = document.querySelectorAll("li");

var len = lis.length;

for(var i=0; i<len; i++){

    lis[i].onclick= function(){

        ul.removeChild(this);

    }

}

*/

// 事件委托

ul.onclick= function(event){

    var evt= event|| window.event;

    var tar= evt.target || evt.srcElement; // 鼠标所点击的目标元素

    console.log( tar );

    console.log( this );

    console.log( tar.nodeName );

    if( tar.nodeName.toUpperCase() == "LI" ){

        ul.removeChild(tar);

    }

}