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 相关文章推荐
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
javascript实现倒计时效果
Feb 17 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
php中函数的形参与实参的问题说明
2010/09/01 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
原生js实现放大镜
2017/02/20 Javascript
Vuex简单入门
2017/04/19 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
js实现登录与注册界面
2017/11/01 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
python实现的防DDoS脚本
2011/02/08 Python
python统计日志ip访问数的方法
2015/07/06 Python
python 美化输出信息的实例
2018/10/15 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
物流专业求职计划书
2014/01/10 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
2014庆六一活动方案
2014/03/02 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
学校安全管理责任书
2014/07/23 职场文书
行政助理岗位职责
2015/02/10 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
学校百日安全活动总结
2015/05/07 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android