事件源对象和事件委托机制

事件源对象是什么

我们打印出来看看

<div class="wrapper" style="width: 100px;height: 100px;background-color:red;">
   <div class="box" style="width: 50px;height: 50px; background-color:yellow;"></div>  </div>

 		var wrapper=document.getElementsByClassName('wrapper')[0];
            var box=document.getElementsByClassName('box')[0];
            //事件源对象
             wrapper.onclick=function(e){
                 var event=e||window.event//考虑到兼容性
                console.log(e)
            }

targrt就是我们要找的源对象，

那么找到了事件源对象有什么用呢
其中之一就是，事件委托机制会用到

当ul下面只有少数的Li的时候，我们可以通过for循环来获取我们点击的li对应的文本内容

 <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>

		 var li =document.getElementsByTagName('li')
            var len=li.length;
            for (var i=0;i<len;i++){
                li[i].onclick=function(){
                    console.log(this.innerText);
                }
            }

很明显for循环浪费性能，如果1千万个li，那么电脑岂不是很崩溃，这个时候用事件委托机制，给ul绑定事件
优点 ，利用事件冒泡和事件源对象进行处理，性能不需要循环所有的元素一个个的绑定事件，2灵活，当有新的子元素时不需要重新绑定事件

（innerText 打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textContent）

		var ul =document.getElementsByTagName('ul')[0]
            ul.onclick=function(){
                var event =e||window.event;
                var target =event.target||event.srcElement;
                console.log(target.innerText);
            }
 // 火狐，event.target  || ie  event.srcElement ||chrome 两者皆可用