javascript 之 事件托付

长处：1、提高性能（仅仅须要对父级进行操作，子节点相同会拥有其相关属性和方法）

2、对于新加入的事件。也让其拥有父级事件的属性

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script type="text/javascript">

		//事件托付

		//让父级托付（冒泡事件）

		//长处：1、提高性能

		window.onload=function  () {

			var oUl=document.getElementById('myUl');

			var aLi=document.getElementsByTagName('li');

			var oInput=document.getElementById('input1');

			var iNow=aLi.length;

			/*

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

				aLi[i].onmouseover=function  () {

					this.style.background="red";

				}

				aLi[i].onmouseout=function  () {

					this.style.background="";

				}

			};*/

			oUl.onmouseover=function  () {

				//找到操作对象，event，对象；事件源：无论在哪个事件中的那个元素就是事件源

				var event=event||window.event;

				var target=event.target||event.srcElement;

				//找元素的标签名NodeName

				//alert(target.nodeName)

				if(target.nodeName.toLowerCase()=='li'){//仅仅让指定的子节点拥有某些属性

					target.style.background="red";

				}

			}

			oUl.onmouseout=function  () {

				//找到操作对象，event，对象；事件源：无论在哪个事件中的那个元素就是事件源

				var event=event||window.event;//w3c标准和Ie标准

				var target=event.target||event.srcElement;

				if(target.nodeName.toLowerCase()=='li'){

					target.style.background="";

				}

			}

			/*	for (var i = 0; i < aLi.length; i++) {

					aLi[i].onclick=function(){

						alert("123");

					}

				};*/

			/*	oUl.onclick=function  () {

					alert("123");//发生冒泡。！！托付了让ul触发。让父级做托付

				}

			*/

			//事件托付的长处2：新加入的元素，还有之前的事件的属性

			oInput.onclick=function  () {

				iNow++;

				var oLi=document.createElement('li');//自身没有事件，可是其父级有。插入新节点后，其父级的事件会影响到当前事件

				oLi.innerHTML=1111*iNow;

				oUl.appendChild(oLi)

			}

		}

	</script>

</head>

<body>

	<input type="button" value="加入" id='input1'>

	<ul id="myUl">

		<li>1111</li>

		<li>2222</li>

		<li>3333</li>

		<li>4444</li>

	</ul>

</body>

</html>

javascript --- 事件托付的更多相关文章

  1. JavaScript事件代理和委托（Delegation）

    JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...

  2. JavaScript事件概览

    JavaScript事件 JavaScript是单线程,在同一个时间点,不可能同时运行两个"控制线程". 事件句柄和事件对象 1.注册事件句柄 标准和非标准 var button= ...

  3. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  4. JavaScript 事件

    事件 概念:事件是可以被 JavaScript 侦测到的行为. JavaScript 使我们有能力创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触 ...

  5. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  6. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  7. 总结JavaScript事件机制

    JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...

  8. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

  9. JavaScript事件流原理解析

    一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...

随机推荐

  1. ubuntu下配置qt+opengl+opencv

    原地址:http://www.cnblogs.com/aleny-liu/archive/2011/12/16/aleny-Qtnote1.html http://blog.csdn.net/jdh9 ...

  2. jQuery手写几个常见的滑动下拉菜单 分分秒秒学习JS

    一般的企业网站再我们再实际工作中,有些特效,用jQuery来做,显得极其简单,除非一些大的公司,需要封装自己的类. 今天,我们讲解jQuery入门知识,来写几个简单jQuery滑动下拉菜单.感受一下j ...

  3. BZOJ 3357: [Usaco2004]等差数列( dp )

    dp(x, p) 表示序列中第x个数, 上一个数是p构成的等差数列的最长. 转移时从[1, x)中枚举p = seq[] 就行了.时间复杂度O(n²logn) -------------------- ...

  4. crm查询记录共享给了哪些人

    有时候,我们须要查询一个记录.共享给了哪些人?怎么做? 第一种做法:是sql的方式 select * from PrincipalObjectAccess where objectid = '5226 ...

  5. JS firebug小技巧

    实际上前端的发展与进步也离不开浏览器的支持,而对于开发者来讲,浏览器最好的支持,就是对于debug的良好支持,甚至在某些兴许接手的项目中,前端的debug甚至能够解决好多问题--不说了,都是泪啊!还是 ...

  6. 最短路径A*算法原理及java代码实现（看不懂是我的失败）

    算法仅仅要懂原理了,代码都是小问题,先看以下理论,尤其是红色标注的(要源代码请留下邮箱,有測试用例,直接执行就可以) A*算法 百度上的解释: A*[1](A-Star)算法是一种静态路网中求解最短路 ...

  7. Python 中的用户自定义类型

    Python中面向对象的技术 Python是面向对象的编程语言,自然提供了面向对象的编程方法.但要给面向对象的编程方法下一个定义,是很困难的.问题关键是理解对象 的含义.对象的含义是广泛的,它是对现实 ...

  8. <转载>div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

  9. GreenDao数据库结构升级

    1.先用GreenDao工具类编写自动创建代码,按照升级后的最新数据库结构来编写 2.GreenDao工具自动生成的代码覆盖到项目里去 3.在项目里找到对应的自动生成的数据库DaoMaster类 在D ...

  10. UVA11552------FEWEST FLOPS------区间型的DP

    题目地址:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...