冒泡：即使通过子级元素的事件来触发父级的事件，通过阻止冒泡可以防止冒泡发生。

事件源：首先这个东西是有兼容行问题的,当然解决也很简单。

两者结合使用，形成的事件委托有两个优势：

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 冒泡和事件源 形成的事件委托的更多相关文章

  1. js：捕获冒泡和事件委托

    一.事件流(捕获,冒泡)   事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...

  2. JavaScript事件代理和事件委托

    一.概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的 ...

  3. JS之捕获冒泡和事件委托

    一.事件流(捕获,冒泡)   事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...

  4. JS中的事件、事件冒泡和事件捕获、事件委托

    https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...

  5. js之捕捉冒泡和事件委托

     以下为转载内容 一.事件流(捕获,冒泡)   事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体 ...

  6. [已转移]js事件流之事件冒泡的应用----事件委托

    该文章已转移到博客:https://cynthia0329.github.io/ 什么是事件委托? 它还有一个名字叫事件代理. JavaScript高级程序设计上讲: 事件委托就是利用事件冒泡,只指定 ...

  7. JavaScript中的事件委托（转至大佬）

    转至:https://www.cnblogs.com/liugang-vip/p/5616484.html 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没 ...

  8. javascript中的事件委托

    这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是 ...

  9. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

随机推荐

  1. c 中可变参数的实现

    我们在C语言编程中有时会遇到一些参数个数可变的函数,例如printf()函数,其函数原型为:     例一: int   printf(   const   char*   format,   ... ...

  2. [转载] 与WIN不同,linux替换文件夹会删除原文件夹下的全部内容！

    今天差点把源码给覆盖掉了><...555... 虚惊一场!!看了一篇博客分析这种情况.我的环境是CentOS5.5,不会出现文件夹直接被覆盖的情况,但是在Linux下不要用Win下的一些直 ...

  3. createwindow

    WNDCLASS wndclass; wndclass.hbrBackground=(HBRUSH)getstockobject(WHITE_BRUSH); wndclass.hCursor=Load ...

  4. 【行为型】Interpreter模式

    解释器模式意图为给定的语言定义其文法表示,同时定义该文法表示的一套解释器来解释语言中的句子.该模式说的简单通俗点,其主要用途是用来解释用的.至于解释什么,则要看具体的上下文环境.我们可以为一个表达式专 ...

  5. HttpCookie

    参考 : http://www.cnblogs.com/fish-li/archive/2011/07/03/2096903.html 上文结尾有提到一个说法 4. HttpRequest.Cooki ...

  6. cf B. Fox Dividing Cheese

    http://codeforces.com/contest/371/problem/B #include <cstdio> #include <iostream> #inclu ...

  7. ALTIUM DESIGNER怎么定义差分对布线

    方法一:第一步是在原理图中声明,这样做的目的是为了让差分对布线器清楚哪两个网络是属于同一组差分对,设计编译器将查找格式为NETNAME_N和NETNAME_P(即以_N和_P为后缀)的两个同名网络.这 ...

  8. Xamarin.Forms App Settings

    配合James Montemagno的Component [Settings Plugin],实现Xamarin.Forms的设置. 更新系统配置且不需要进行重启app. 方式一xml Xamarin ...

  9. 用VBA读取Excel表格输出到格式化的xml文件中

    最近需要做一个一劳永逸的XML文档生成,给项目内部专用的,直接VBA方便了,才第一次用.现学现卖了....抽时间还是系统的学习下这方面的知识吧 输出到UTF-8编码的XML文档.并且换行符是Unix的 ...

  10. android中使用PopupWindow实现弹出窗口菜单

    结合上篇android中使用ViewPager实现图片拖动,我们实现了点击“帮助”按钮的功能,这一篇则是接着上一篇,让我们一起来完成“我的”按钮的功能,这一功能,则是使用PopupWindow来实现弹 ...