js实现事件委托
事件委托的概念:
事件委托就是利用事件冒泡,把事件加到父元素或祖先元素上,触发执行效果。
事件委托的写法:
btn6.onclick = function(event){
event = event || window.event;
var target = event.target || event.srcElement;//获取鼠标源
if(target.nodeName.toLowerCase() == 'div'){//获取到鼠标源的tag标签,toLowerCase()方法表示把获取到的节点名转换为小写,并判断是否与右侧相等;若相等则执行逍遥的效果
alert('事件委托');
}
}
说明事件委托可以为新添加的DOM元素动态的添加事件
<ul id="list">
<li id="item1" >item1</li>
<li id="item2" >item2</li>
<li id="item3" >item3</li>
</ul>
<script>
var list = document.getElementById("list");
document.addEventListener("click",function(event){
var target = event.target || event.srcElement;
if(target.nodeName == "LI"){
alert(target.innerHTML);
}
})
// 添加节点
var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);
</script>
最新文章
- maven国内镜像(maven下载慢的解决方法)
- Java File创建新目录和文件
- 让BI告诉你:圣诞老人去哪了?
- Hadoop安装lzo实验
- java操作MySQL数据库(插入、删除、修改、查询、获取所有行数)
- UVA 11992 Fast Matrix Operations (二维线段树)
- lucene搜索方式(query类型)
- userscript.user.js 文件头
- Android常用动画Animation的使用
- 前端SEO优化
- Redmine数据库备份及搬家
- Java中CardLayout布局方式的应用
- pygame 笔记-2 模仿超级玛丽的弹跳
- QGis+QT5.9+VS2017源码编译
- hdu 1588 求f(b) +f(k+b) +f(2k+b) +f((n-1)k +b) 之和 (矩阵快速幂)
- springMVC的工作流程图
- JD m站自我解析理解
- day02 大型互联网架构演变历程笔记 和nigix和keepalived
- Python中类的定义与使用
- Java从零开始学二十三(集合Map接口)
热门文章
- 把云数据库带回家!阿里云发布POLARDB Box数据库一体机
- 在Rancher2中部署Docker-Registry仓库服务
- ajax跨域获取网站json数据
- range()函数在python3与python2中的区别
- 浅析ES的_source、_all、store、index
- wpf 定时器应用,在界面动态刷新时间
- java_打印流
- windows pip 安装 转载
- Sightseeing Cows
- import: not authorized `time&#39; @ error/constitute.c/WriteImage/1028. import: not authorized `rospy&#39; @ error/constitute.c/WriteImage/1028.