body click js 委托_原生js事件委托实现选项卡

今天献上一个原生js事件委托实现的选项卡，每行都会有注释，算是整理的笔记，如果有使用的可以直接拿走！

样式：

html,body,ul,li,ol{

list-style: none;

margin: 0;

padding: 0;

}

#box{

width: 500px;

height: 300px;

margin: 50px auto;

}

#box>ul{

width: 100%;

height: 50px;

line-height: 50px;

}

#box>ul>li{

float: left;

height: 50px;

width: 100px;

text-align: center;

}

#box>ul>li.dk{

background: lawngreen;

color: white;

}

#box>ol{

width: 100%;

height: 50px;

}

#box>ol>li{

float: left;

display: none;

}

#box>ol>li.oy{

display: block;

}

布局：

• 达康
• 育梁
• 同伟
• 赵东来
• 亮平

1. 你是不是特希望我下台
2. 热情、礼貌、一问三不知
3. 做好你的东宫正室
4. 当断则断
5. 不能突破底线

js逻辑：

//获取ul

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

//获取ul的子元素li

var oL = oU.children;

//获取ol

var oO = document.getElementsByTagName('ol')[0];

//获取ol的子元素li

var oLi = oO.children;

//循环ul的子元素li

for(var i = 0; i < oL.length; i++){

oL[i].index = i;

}

//给ul绑定事件

oU.onclick = function(){

// event事件兼容写法

var event = event || window.event;

// console.log(event);

// 事件委托兼容写法 target 当前点击的子元素

var target = event.target || event.srcElement;

// console.log(target);

//循环ul的子元素li

for(var j = 0; j < oL.length; j++){

//清空样式

oL[j].className = '';

oLi[j].className = '';

}

//添加样式

target.className = 'dk';

oLi[target.index].className = 'oy';

}