miaov视频教程  http://study.163.com/course/courseMain.htm?courseId=231002

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<ul id="ul1">

  <li>1111</li>

  <li>2222</li>

  <li>3333</li>

  <li>4444</li>

  <li>5555</li>

</ul>

<input type="button" id="add" value="添加"/>

<script>

window.onload=function(){

var oUl=document.getElementById('ul1');  //ul

var oLi=oUl.getElementsByTagName('li');  //li

var iNow=4;

for(i=0;i<oLi.length;i++){

       this.onclick=function(ev){       //这里不用this，不能发生冒泡

       ev=ev || window.event;            //event兼容

       target=ev.srcElement || ev.target;  //event.target兼容

       if(target.nodeName.toLowerCase() == "li"){    //判断nodeName

           target.style.backgroundColor='red';   //背景红色

       }

   }

}

var oAdd=document.getElementById('add'); //点击添加按钮

  oAdd.onclick=function(){

    iNow++;

    var aLi=document.createElement('li');   //创建li节点

    aLi.innerHTML=iNow*1111;

    oUl.appendChild(aLi);                  //添加li节点

  }

}

</script>

</body>

</html>

js事件委托，可以使新添加的元素具有事件(event运用)的更多相关文章

  1. js动态添加的元素绑定事件

    最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...

  2. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  3. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  4. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  5. jQuery中如何给动态添加的元素绑定事件

    jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...

  6. jquery on() bind()绑定的点击事件在js动态新添加的元素生效

    方法一:$('.class').on("click",function(){……}); 相当于 $('.class').bind("click",functio ...

  7. jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...

  8. jQuery对 动态添加 的元素 绑定事件（on()的用法）

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  9. 关于 jquery html 动态添加的元素绑定事件——On()

    Ajax动态生成的数据,动作绑定需要重新执行 $(document).on('click','.btn1',function(){}); 替换: $('btn1').on('click') = fun ...

随机推荐

  1. O_NONBLOCK on regular file

    It seems that writes/reads to regular files can't not be made non-blocking. I found the following re ...

  2. Hibernate原生SQL查询多表关联，SQL语句要注意的问题

    Hibernate原生SQL查询多表关联,SQL语句要注意的问题 @for&ever 2009-9-4 系统环境: MySQL5.1 Hibernate3.3 有如下的假定: 实体类 Ques ...

  3. lucene教程简介

    1 lucene简介 1.1 什么是lucene     Lucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来就能用,它只是 ...

  4. （实用篇）PHP中单引号与双引号的区别分析

    在PHP中,我们可以使用单引号或者双引号来表示字符串.不过我们作为开发者,应该了解其中的区别.单引号与双引号对于定义字符一个是可以解析变量一个是会把变量直接输出来,同时单引号与双引号在字符处理上单引号 ...

  5. Apache Jena - A Bootstrap

    前言 这篇文档属探究立项性质,作为语义网和本体建模工作的延续. 依照NoSQL Distilled上的考察方法,将Apache Jena作为图数据库的泛型考察.   内容 多种出版物上声明主要有四类N ...

  6. C#委拖小例子

    委托具有以下属性: 委托类似于 C++ 函数指针,但它们是类型安全的. 委托允许将方法作为参数进行传递. 委托可用于定义回调方法. 委托可以链接在一起:例如,可以对一个事件调用多个方法. 方法不必与委 ...

  7. iframe的高度自适应

    http://www.cnblogs.com/snandy/p/3902337.html http://www.cnblogs.com/snandy/p/3900016.html Snandy Sto ...

  8. tar

    必要参数有如下: -A 新增压缩文件到已存在的压缩 -B 设置区块大小 -c 建立新的压缩文件 -d 记录文件的差别 -r 添加文件到已经压缩的文件 -u 添加改变了和现有的文件到已经存在的压缩文件 ...

  9. 知识积累:DAS NAS SAN

    DAS(Direct Acess Storage—直接连接存储)是指将存储设备通过SCSI接口或光纤通道直接连接到一台计算机上.NAS(Network Attached Storage)—网络连接存储 ...

  10. [转]配置mysql允许远程连接的方法

    配置mysql允许远程连接的方法 vim /etc/my.cnf注释这一行:bind-address=127.0.0.1 ==> #bind-address=127.0.0.1保存退出.mysq ...