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. EC6 map 和 set

    1.map 首先map是一个具有键值对的结构 给定一个名字,要查找对应的成绩,就先要在names中找到对应的位置,再从scores取出对应的成绩,Array越长,耗时越长. 如果用Map实现,只需要一 ...

  2. .使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 引用计数gc机制使用不当导致内存泄漏

    上一篇文章找同事review了一下,收到的反馈是铺垫太长了,我尽量直入正题,哈哈 最近dbd压测时发现内存泄漏,其实这个问题去年已经暴露了,参见这篇博客[压测周].当时排查不够仔细,在此检讨下.关于d ...

  4. 十分钟了解分布式计算:Petuum

    Petuum是一个机器学习专用分布式计算框架,本文介绍其架构,并基于文章 More Effective Distributed ML via a Stale Synchronous Parallel ...

  5. 对于EL表达式和ONGL表达式区别的相关理解

    java程序跑起来之后,会有一个内存空间分配出来,存入用到的值,这个值的周围就是上下文空间,而九大内置对象等,都在这个值的周围放着,像这样: el 就只能获取value stack 周围 的数据,va ...

  6. HTTP POST GET详解

    get /shang/a1.php http/1.1 host: localhost                           POST /shang/a1.php HTTP/1.1 Hos ...

  7. 用java语言实现事件委托模式

    http://blog.csdn.net/yanshujun/article/details/6494447 用java语言实现事件委托模式 2010-04-27 00:04 2206人阅读 评论(1 ...

  8. WCF: 没有终结点在侦听可以接受消息的 这通常是由于不正确的地址或者 SOAP 操作导致的。

    问题:     由于我这里的wcf服务是采用“BasicHttpBinding”的方式,即安全绑定模式,客户端在引用这个服务后所生成的终结点配置(endpoint )就变成了<endpoint ...

  9. 使用air16sdk打包ipa报错

    报错如下图: google下 https://forums.adobe.com/thread/1659726 说明了一切 首先:air sdk中打包ipa 需要使用ios sdk的路径但是这个路径最后 ...

  10. Win32API界面库 - Project wheels 工程基础部分完成

    离上次发博文过去了好久,先是要忙一个机器人的项目,然后就是部门的事情和考试周复习,然后就到了考试周,趁着复习的间隙,拾起了寒假时候抄的界面库,修掉了从前的bug. bug1 控件显示问题 当初抄这个库 ...