事件委托的概念:

  事件委托就是利用事件冒泡,把事件加到父元素或祖先元素上,触发执行效果。

  事件委托的写法:

        

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>

最新文章

  1. maven国内镜像(maven下载慢的解决方法)
  2. Java File创建新目录和文件
  3. 让BI告诉你:圣诞老人去哪了?
  4. Hadoop安装lzo实验
  5. java操作MySQL数据库(插入、删除、修改、查询、获取所有行数)
  6. UVA 11992 Fast Matrix Operations (二维线段树)
  7. lucene搜索方式(query类型)
  8. userscript.user.js 文件头
  9. Android常用动画Animation的使用
  10. 前端SEO优化
  11. Redmine数据库备份及搬家
  12. Java中CardLayout布局方式的应用
  13. pygame 笔记-2 模仿超级玛丽的弹跳
  14. QGis+QT5.9+VS2017源码编译
  15. hdu 1588 求f(b) +f(k+b) +f(2k+b) +f((n-1)k +b) 之和 (矩阵快速幂)
  16. springMVC的工作流程图
  17. JD m站自我解析理解
  18. day02 大型互联网架构演变历程笔记 和nigix和keepalived
  19. Python中类的定义与使用
  20. Java从零开始学二十三(集合Map接口)

热门文章

  1. 把云数据库带回家!阿里云发布POLARDB Box数据库一体机
  2. 在Rancher2中部署Docker-Registry仓库服务
  3. ajax跨域获取网站json数据
  4. range()函数在python3与python2中的区别
  5. 浅析ES的_source、_all、store、index
  6. wpf 定时器应用,在界面动态刷新时间
  7. java_打印流
  8. windows pip 安装 转载
  9. Sightseeing Cows
  10. import: not authorized `time&#39; @ error/constitute.c/WriteImage/1028. import: not authorized `rospy&#39; @ error/constitute.c/WriteImage/1028.