<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>面试题练习img居中</title>

<style type="text/css">

img {

/*display: table-cell;

vertical-align: middle;*/

}

html,body{

height: 100%;

}

div{

width: 600px;

height: 1600px;

display: table-cell;

vertical-align: middle;

text-align: center;

}

</style>

</head>

<body>

<ul>

<li id="a">1</li>

<li id="b">2</li>

<li id="c">3</li>

<li id="d">4</li>

<li id="e">5</li>

</ul>

</body>

<script type="text/javascript">

var str = document.getElementsByTagName("ul")[0];

str.onclick = function(){

var hehe = event || window.event;

var target = hehe.target || hehe.srcElement;

switch(target.id){

case "a":{

console.log(1);

this.style.background = "orange";

break;

}

case "b":{

console.log(2);

this.style.background = "orange";

break;

}

case "c":{

console.log(3);

this.style.background = "orange";

break;

}

case "d":{

console.log(4);

this.style.background = "orange";

break;

}

case "e":{

console.log(5);

this.style.background = "orange";

break;

}

}

}

</script>

</html>

使用事件委托以后，可以不必在每个子元素上绑定事件，能够优化性能，同时对于一些动态添加进去的子元素，事件委托也要比执行回调函数绑定事件更加方便

事件委托能够优化js性能的更多相关文章

  1. js事件委托篇(附js一般写法和js、jq事件委托写法)

    参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...

  2. web优化 js性能高级篇

    今天我们继续上一个阶段关于web的性能优化,如何对js高级进行优化 (1)闭包 何为闭包; 一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.  我认 ...

  3. js 事件委托 事件代理

    JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 通过例子类比: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三 ...

  4. 彻底弄懂JS事件委托的概念和作用

    一.写在前头    接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...

  5. focus如何实现事件委托

    事件委托是利用事件冒泡机制的一种优化手段,如果有很多列表元素要绑定事件,那么就可以用事件委托来优化(不需要给每个元素都绑定事件).但是对于focus这种特殊的表单事件,它不会冒泡,那么又该如何实现这一 ...

  6. e.target与事件委托简例

    target定义: target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素.文档或窗口. 语法: event.target event.target.nodeName  // ...

  7. javaScript绑定事件委托 demo

    事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行. 由此 事件委托 可以优化事件绑定行为.. 事件逐层冒泡 ...

  8. JQ 为未来元素添加事件处理器—事件委托

    随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供 ...

  9. 事件委托live,delegate,on区别

    事件委托 我们知道,DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一 ...

随机推荐

  1. Excel

    EXCEL Excel2003中如何复制多个分开的单元格而不复制中间的内容

  2. Bootstrap <基础三十一>插件概览

    在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...

  3. Java泛型中的? super T语法

    ? super T 语法将泛型类限制为所有T的超类(包括T自身),但只能用于参数中,不可以在返回值用加以限定.如果不加以限定,假设某个函数头为? super Manager get()由于编译器不知道 ...

  4. [linux-内核][转]内核日志及printk结构浅析

    这段时间复习了一下内核调试系统,注意看了一下printk的实现以及内核日志的相关知识,这里做一下总结. 1.问题的引出: 做DPDK项目时,调试rte_kni.ko时,发现printk并不会向我们想想 ...

  5. HBase查找一条数据的过程

    HBase中的Client如何路由到正确的RegionServer 在HBase中,大部分的操作都是在RegionServer完成的,Client端想要插入,删除,查询数据都需要先找到相应的 Regi ...

  6. HyperV采用硬盘拷贝的方式迁移虚拟机后的问题处理

    公司有一台RSA认证服务器,是在windows 2008 R2下的虚拟机,最近总是出现服务中断的情况,考虑到宿主机性能较差,于是想迁移到新的服务器中. 本想通过SCVMM来迁移,但因功能不可用,所以采 ...

  7. 还有一个月，或者不到一个月就要期末了，复习ing

    首先,线性代数,课程设计,php  ,数据库,操作系统,还有概率论 ,四级

  8. asp.net C#获取程序文件相关信息

    代码如下 复制代码 using System.Reflection;using System.Runtime.CompilerServices; //// 有关程序集的常规信息是通过下列// 属性集控 ...

  9. js和jquery获取图片真实的宽度和高度

    1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往 ...

  10. 排序系列 之 直接插入排序算法 —— Java实现

    直接插入排序算法 基本思想: 把n个待排序的元素看成一个有序表和一个无序表,开始时有序表中只有一个元素,无序表中有n-1个元素:排序过程即每次从无序表中取出第一个元素,将它插入到有序表中,使之成为新的 ...