js中的事件代理及兼容性写法

js中事件冒泡我们知道，子元素身上的事件会冒泡到父元素身上。

事件代理就是，本来加在子元素身上的事件，加在了其父级身上。

那就产生了问题：父级那么多子元素，怎么区分事件本应该是哪个子元素的？

答案是：event对象里记录的有“事件源”，它就是发生事件的子元素。

它存在兼容性问题，在老的IE下，事件源是 window.event.srcElement，其他浏览器是 event.target

用事件委托有什么好处呢？
第一个好处是效率高，比如，不用for循环为子元素添加事件了
第二个好处是，js新生成的子元素也不用新为其添加事件了，程序逻辑上比较方便

事件代理 兼容性写法
var ev = ev || window.event;
var oLi = ev.srcElement || ev.target;
例如下面的例子

注意，要加一个if判断，因为事件冒泡的影响，鼠标移到了ul身上而不是某个li身上时，获取的事件源是ul，那么整个ul背景将变红，这不是想要的结果，怎么办？

答曰：加个判断。通过事件源的nodeName判断是不是li，是才做出反应，不是不理它。为了防止nodeName在不同浏览器获取的字母大小写不同，加个toLowerCase()

<script type="text/javascript">
 2             window.onload = function(){
 3                 var oUl = document.getElementById('ul1');
 4                 
 5                 oUl.onmouseover = function(ev){
 6                     var ev = ev || window.event;
 7                     var oLi = ev.srcElement || ev.target;
 8                     if(oLi.nodeName.toLowerCase() == 'li'){
 9                         oLi.style.background = 'red';
10                     }                       
12                 }
14                 oUl.onmouseout = function(ev){
15                     var ev = ev || window.event;
16                     var oLi = ev.srcElement || ev.target;
17                     if(oLi.nodeName.toLowerCase() == 'li'){
18                         oLi.style.background = '';
19                     }                
20                 }
23             }
24         </script>