js给每个li绑定不同事件(事件委托技术)
来源:互联网 发布:如何在淘宝买好货 编辑:程序博客网 时间:2024/05/07 02:33
一:给ul下的li绑定同样的事件(制作选项卡的原理)
html可css:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * {margin: 0;padding: 0;} #myList {width: 200px;height: 200px;margin: 50px;list-style: none;background: #ccc;overflow: hidden;} #myList li {width: 100%;border-top: 1px solid black;line-height: 50px;} #myList li:first-child {border-top: 0;} </style></head><body> <ul id="myList"> <li id="list1">列表1</li> <li id="list2">列表2</li> <li id="list3">列表3</li> <li id="list4">列表4</li> </ul></body></html>
js代码:
//给ul下的li元素绑定同一个事件 var list = document.getElementById('myList'); var listChild = document.getElementsByTagName('li'); for(var i=0; i<listChild.length; i++){ listChild[i].addEventListener('click',function(){ for(var j=0; j<listChild.length; j++){ listChild[j].style.background = '#ccc'; //给所有li颜色变为#ccd } this.style.background = 'red'; //给选中的li颜色变为red },false) }
二:给ul下的li绑定不同的事件
还是上面的html,给它们绑定不同的事件,js代码如下:
//给ul下的li元素绑定不同事件 var list = document.getElementById('myList'); list.addEventListener('click',function(event){ event = event || window.event; var target = event.target || event.srcElement; switch(target.id){ case "list1" : console.log('list1'); break; case "list2" : console.log("list2"); break; case "list3" : console.log("list3"); break; case "list4" : console.log("list4"); break; } },false);
上面的方法相对于给每个事件都直接来一个addEventListener的方法而言比较节约内存。
1 0
- js给每个li绑定不同事件(事件委托技术)
- js 利用闭包循环给li绑定参数不同的点击事件
- JS中for循环出现的问题:如何给li元素绑定事件,点击每个li元素弹出对应的索引?
- js事件绑定、事件监听、事件委托
- 给每个li绑定事件并且获取他的属性值
- js循环给li绑定事件实现 点击li弹出其索引值 和内容
- 原生js事件批量绑定-事件委托
- li标签绑定事件
- js中的事件委托技术
- JS 中的事件绑定、事件监听与事件委托
- JS 事件绑定、事件监听、事件委托详细介绍
- JS 中的事件绑定、事件监听、事件委托是什么?
- JS 中的事件绑定、事件监听、事件委托
- JavaScript给每一个li节点绑定点击事件
- js事件委托的方式绑定
- js中事件绑定3种方法以及事件委托
- JS事件机制:事件绑定、事件监听、事件委托(事件代理)
- 事件绑定与事件委托
- python 读写文件
- 程序员面试金典: 9.1数组与字符串 5字符串压缩
- 第十五周-OJ-C字符串逆序输出
- perl 单引号解析
- codeforces 749C Voting
- js给每个li绑定不同事件(事件委托技术)
- FZU 1686神龙的难题(DLX可重复覆盖)
- 程序员苹果电脑使用入门
- git的使用知识点总结(二)
- Java中分割字符串
- Android Studio中使用git托管代码到gitlab
- PE 105 Special subset sums: testing (位运算枚举子集)
- Python CF入门实验
- Codeforces Round #387 (Div. 2) Winter Is Coming(贪心)