javascript --- 事件托付
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 --- 事件托付的更多相关文章
- JavaScript事件代理和委托（Delegation）
JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...
- JavaScript事件概览
JavaScript事件 JavaScript是单线程,在同一个时间点,不可能同时运行两个"控制线程". 事件句柄和事件对象 1.注册事件句柄 标准和非标准 var button= ...
- 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- JavaScript 事件
事件 概念:事件是可以被 JavaScript 侦测到的行为. JavaScript 使我们有能力创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触 ...
- JavaScript事件详解-jQuery的事件实现（三）
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- 总结JavaScript事件机制
JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...
- 解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
- JavaScript事件流原理解析
一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...
随机推荐
- Jquery 中each循环嵌套的使用示例教程
1.从MVC返回的Json数据如下: 2.下面是客户端实现的示例: $.post("/admin/GetPermissionsForRole", function (data,st ...
- SQL多个表实现联合查询
select LineId,Id,Country from Domestic union allselect LineId,Id,Country from Freedom-- 联合查询Domestic ...
- μC/OS学习资料（附Ebook）
注意:下载地址位于文末. μC/OS-各版本源码 <嵌入式实时操作系统μC/OS-II> <嵌入式实时操作系统μC/OS-III> <μC/OSII2.52源码中文译注- ...
- PHP - 概述
第1章 PHP概述 学习要点: 1.PHP基础知识 2.PHP的环境配置 3.安装三款主流程序 4.PHP开发工具的选择 5.一个简单的示例 一．PHP基础知识 PHP PHP是一种目前最流行的服务端 ...
- 云计算：创业的好时机——上海够快网络科技有限公司总经理蒋烁淼专访（评价阿里云的OSS的4个优点）（够快科技正式宣布已成功挂牌新三板）
云存储是云计算目前的热点之一,Dropbox.Box等产品的风靡,公司因此获得极高估值,都印证了这一点.但云存储对技术和资金要求都比较高,竞争也非常激烈,挑战巨大.国外云存储公司有亚马逊的云平台作为支 ...
- 使用boost中的property_tree实现配置文件
property_tree是专为配置文件而写,支持xml,ini和json格式文件 ini比较简单,适合简单的配置,通常可能需要保存数组,这时xml是个不错的选择. 使用property_tr ...
- [poj 1904]King's Quest[Tarjan强连通分量]
题意:(当时没看懂...) N个王子和N个女孩, 每个王子喜欢若干女孩. 给出每个王子喜欢的女孩编号, 再给出一种王子和女孩的完美匹配. 求每个王子分别可以和那些女孩结婚可以满足最终每个王子都能找到一 ...
- JCL学习
JCL基本概念 定义:job control language 用户与操作系统的接口,用户通过JCL语句按照自己的意图来控制作业的执行. JOB的概念:把大机要实现的每一项任务,称为一个JOB或作业. ...
- linux设备驱动程序注冊过程具体解释
Linux的驱动程序注冊过程,大致分为两个步骤: 模块初始化 驱动程序注冊 以下以内核提供的演示样例代码pci-skeleton.c,具体说明一个pci设备驱动程序的注冊过程.其它设备的驱动代码注冊过 ...
- Java设计模式---外观模式
外观模式(Facade) 外观模式的意图是:为子系统提供一个接口,便于它的使用. 解释: 简单的说,外观模式就是封装多个上层应用需要的方法,使得上层调用变得简单,为上层提供简单的接口,是设计模式中 ...