JS事件委派与tab栏切换问题

js中的事件委派:
基本概念
事件委派：将事件统一绑定给元素共同的祖先元素（后代元素事件触发时，通过冒泡，通过祖先元素的响应函数来处理事件），这样可以只绑定一次，即可应用到多个元素上。事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能event中的target表示的触发事件的对象 ，使用它对触发事件的元素进行判断。
实例解说:
1.传统方式

<div class="tab_list">
        <ul>
            <li class="current">账号密码登录</li>
            <li>|</li>
            <li>手机短信登录</li>
        </ul>

<script>
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        for(var i=0;i<lis.length;i++){
            lis[i].addEventListener('click',function (){
                for(var i=0;i<lis.length;i++){
                    lis[i].className = '';
                }
                this.className = 'current';
            })
        }
 </script>

初始界面:

点击后的变化

我们可以发现,传统的循环目标注册方法,在处理tab栏切换方面非常有效!
接着我们看事件委派这种极为高效的方法,可能在这方面显得不尽人意:
实例解说:
事件委派方式:



我们可以发现,他赋值错误.

主要是因为:即便我将最后的赋值改变成this.childNotes.ClassName=“current”;也是错误的!运用事件委派无法预测我们选中的是哪个子类!!因此想要获取事件源，在事件委派中要使用target.不能用this
有错必究!希望大家共同进步共同学习!
javaScript/git/java/pyhton/go自学交流群:287048847
鄙人自建,希望大家多多交流.嘿嘿