javascript 冒泡和事件源 形成的事件委托
冒泡:即使通过子级元素的事件来触发父级的事件,通过阻止冒泡可以防止冒泡发生。
事件源:首先这个东西是有兼容行问题的,当然解决也很简单。
两者结合使用,形成的事件委托有两个优势:
1.减少性能消耗;
2.新添加的事件,也可以绑定时间,因为使用的是事件源而不是直接通过前面的程序来绑定。
以下例子,功能是通过事件冒泡的原理,将li的点击事件来触发ul的点击事件,在this指向确定的情况下,通过事件源的原理来确定当前点击的li,并获取li的内容。另外通过button的按钮可以添加li,而且这个li也可以有点击事件。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<input type="button" value="添加">
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</body>
</html>
js:
<script type="text/javascript">
window.onload = function(){
var oUl= document.getElementById('ul1');
var iNow = 4;
oUl.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == 'ul'){
return false;
}
alert(target.innerHTML) }
var button = document.getElementsByTagName('input')[0];
button.onclick = function(){
iNow++
var oLi = document.createElement('li');
oLi.innerHTML = '111' * iNow;
oUl.appendChild(oLi)
}
}
</script>
javascript 冒泡和事件源 形成的事件委托的更多相关文章
- js:捕获冒泡和事件委托
一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...
- JavaScript事件代理和事件委托
一.概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的 ...
- JS之捕获冒泡和事件委托
一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...
- JS中的事件、事件冒泡和事件捕获、事件委托
https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...
- js之捕捉冒泡和事件委托
以下为转载内容 一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体 ...
- [已转移]js事件流之事件冒泡的应用----事件委托
该文章已转移到博客:https://cynthia0329.github.io/ 什么是事件委托? 它还有一个名字叫事件代理. JavaScript高级程序设计上讲: 事件委托就是利用事件冒泡,只指定 ...
- JavaScript中的事件委托(转至大佬)
转至:https://www.cnblogs.com/liugang-vip/p/5616484.html 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没 ...
- javascript中的事件委托
这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是 ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
随机推荐
- smarty练习:考试系统
考试系统 (0607) 做一个类似于驾校考试的系统,可以选择要考试试题类型,选好后进入考试页面 使用的数据库表格:timu(题目)表,xuanxiang(选项)表,shiti(试题)表,shititi ...
- Phpcms v9系统类库与函数库调用方法
在分享了n多phpcms的教程后,cmsyou继续分享关于phpcms v9系统类库与函数库的调用方法. 系统类库位于系统的 /libs/functions目录下面,函数库文件名为*.func.php ...
- ActiveRecord 模式杂谈
ActiveRecord也属于ORM(对象关系映射)层,由Rails最早提出,遵循标准的ORM模型:表映射到记录,记录映射到对象,字段映射到对象属性.配合遵循的命名和配置惯例,能够很大程度的快速实现模 ...
- cxf-webservice-在was6服务器上运行
最近开发了一个webservice服务,采用了常用的cxf框架. 本地jetty测试一切ok,发布到现场环境was服务器中,就报错,不能运行. 访问services页面报错为 Error 500: S ...
- 文件头 MAGE_FILE_HEADER
IMAGE_FILE_HEADER这个结构的定义如下: typedef struct _IMAGE_FILE_HEADER { 00h WORD Machine; //运行平台 02h WORD Nu ...
- UCOS 堆栈大小 计算 (堆栈的决定性因素)
决定栈空间的大小,不仅需要计算任务本身的需求(局部变量.函数调用等),还要计算最多中断嵌套层数(保存寄存器.中断服务程序中局部变量等) 原文地址:uCOS任务堆栈的深入分析.作者:jiecou 堆栈作 ...
- HBase笔记--编程实战
HBase总结:http://blog.csdn.net/lifuxiangcaohui/article/details/39997205 (very good) Spark使用Java读取hbas ...
- Spark保存到HDFS或本地文件相关问题
spark中saveAsTextFile如何最终生成一个文件 http://www.lxway.com/641062624.htm 一般而言,saveAsTextFile会按照执行task的多少生成多 ...
- Chrome下的语音控制框架MyVoix.js使用篇(四)
在上一篇博文中,我为大家介绍了myvoix.js中的smart learning模块,以及何如使用该功能.(myvoix.js的源码地址会在每一篇文章末尾放出) 文本将拓展 Chrome下的语音控制框 ...
- Decimal Basic 学习笔记(1)
定义变量 LET a 输入变量值 INPUT a INPUT a,b 运算结果绝对值小于1前面的0省略,科学计数 PRINT语句 数值直接写,字符串用“” 通过 分号: 和 逗号,来分隔显示两个项目 ...