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 相关文章推荐
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
vue a标签点击实现赋值方式
Sep 07 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
php smarty的预保留变量总结
2008/12/04 PHP
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
python操作MongoDB基础知识
2013/11/01 Python
Django用户认证系统 User对象解析
2019/08/02 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Django如何使用redis作为缓存
2020/05/21 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
车间安全生产标语
2014/06/06 职场文书
公司领导班子对照材料
2014/08/18 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python