javascript事件委托的用法及其好处简析


Posted in Javascript onApril 04, 2016

本文为大家简单介绍了javascript事件委托的用法及其好处,供大家参考,具体内容如下

事件委托:利用冒泡的原理,把事件加到父级上,触发执行效果,
好处:提高性能,新添加的元素还会有之前的事件。
event对象:事件源,不管在哪个事件中,只要你操作的那个元素就是事件源

获取事件源:
IE:window.event.srcElement 

标准下:event.target  target.nodeName来判断是哪个标签

代码应用如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload=function ()
{
  var oUl=document.getElementById('ul1');
  var oBtn=document.getElementById('btn1');
  var iNow=5;
  //事件源的方法依然保留父级事件!
  oUl.onmouseover=function(ev)
  {
    var ev=ev||window.event;
    var target=ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()=='li')
    {
      target.style.background='red';
    }
  }
  oUl.onmouseout=function(ev)
  {
    var ev=ev||window.event;
    var target=ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()=='li')
    {
      target.style.background='';
    }
  }
  oBtn.onclick=function()
  {
    iNow++;
    var oLi=document.createElement('li');
    oLi.innerHTML=111*iNow;
    oUl.appendChild(oLi);
  }
}
</script>
</head>
<body >
<input type="button" value="添加" id='btn1'>
<ul id='ul1'>
  <li>11111</li>
  <li>22222</li>
  <li>3333333</li>
  <li>44444444</li>
  <li>66666666</li>
</ul>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
javascript实用方法总结
Feb 06 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 Javascript
基于javascript制作微博发布栏效果
Apr 04 #Javascript
纯js实现手风琴效果
Apr 17 #Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 #Javascript
Angular 根据 service 的状态更新 directive
Apr 03 #Javascript
jQuery中的Deferred和promise 的区别
Apr 03 #Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 #Javascript
jQuery qrcode生成二维码的方法
Apr 03 #Javascript
You might like
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
Python MD5文件生成码
2009/01/12 Python
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
python中使用while循环的实例
2019/08/05 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
python接口自动化框架实战
2020/12/23 Python
生物科学专业职业规划书范文
2014/02/11 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
文案策划岗位职责
2015/02/11 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
python开发的自动化运维工具ansible详解
2021/08/07 Python
浅谈JavaScript作用域
2021/12/06 Javascript
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技