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. 使用SHA1、SHA2双证书进行微软数字签名

    微软是第一个宣布了SHA-1弃用计划,在2016年之后Windows和IE将不再信任SHA-1证书.正好我们公司的数字签名也到期了,索性就重新申请了sha256和sha1的新数字证书,用来给产品签名. ...

  2. SSH-Struts(一)——基本原理

    简单介绍 Struts框架是MVC的一个实现,它非常好的结合了JSP.Servlet.JavaBean.Taglib等技术.它为MVC的各层提供了良好的支持,就像房地产商盖房子时先盖的大楼框架. 仅仅 ...

  3. CodeForces Round #173 (282E) - Sausage Maximization 字典树

    练习赛的时候这道题死活超时....想到了高位确定后..低位不能对高位产生影响..并且高位要尽可能的为1..就是想不出比较好的方法了实现... 围观大神博客..http://www.cnblogs.co ...

  4. ADO.NET 2SqlDataAdapter、DataSet 的基本用法

    数据集完全独立于数据源,可以与数据源链接或者完全断开,其基本作用是为存储在内存缓存中的的数据提供关系视图 如果只是想读取和显示数据,则值需要使用数据读取器,尤其是处理大量数据的时候 如果需要处理数据, ...

  5. DELPHI语法基础学习笔记-Windows 句柄、回调函数、函数重载等（Delphi中很少需要直接使用句柄，因为句柄藏在窗体、 位图及其他Delphi 对象的内部）

    函数重载重载的思想很简单:编译器允许你用同一名字定义多个函数或过程,只要它们所带的参数不同.实际上,编译器是通过检测参数来确定需要调用的例程.下面是从VCL 的数学单元(Math Unit)中摘录的一 ...

  6. Spring MVC 学习笔记 json格式的输入和输出

    Spring mvc处理json需要使用jackson的类库,因此为支持json格式的输入输出需要先修改pom.xml增加jackson包的引用 <!-- json --> <dep ...

  7. Debian安装Nexus

    前置条件 安装jdk (如果使用 nexus-2.6 以上版本需要jdk7) 1 apt-get install openjdk-6-jre / apt-get install openjdk-6-j ...

  8. iphone开发教程下载

    iphone开发教程下载 3月份花了1个月研究ios 开发,看了几百页的iphone开发教程,累积了不少电子书,盘点一下 Beginning iPhone 4 Development: Explori ...

  9. linux系统挂掉问题的分析

    玩linux系统,经常遇到的一件事就是做了某个操作之后系统会突然挂掉,这要怎么办? 1. 首先我们要看log,看看是否会留下一些蛛丝马迹,比如PC/LR是否有留下来. PC是ARM的一个寄存器,即程序 ...

  10. C++中vector的实现

     注意几点: 分配内存不要使用new和delete,由于new的同一时候就把对象构造了.而我们须要的是原始内存. 所以应该使用标准库提供的allocator类来实现内存的控制.当然也能够重载ope ...