事件委托能够优化js性能
<!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性能的更多相关文章
- js事件委托篇(附js一般写法和js、jq事件委托写法)
参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...
- web优化 js性能高级篇
今天我们继续上一个阶段关于web的性能优化,如何对js高级进行优化 (1)闭包 何为闭包; 一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 我认 ...
- js 事件委托 事件代理
JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 通过例子类比: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三 ...
- 彻底弄懂JS事件委托的概念和作用
一.写在前头 接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...
- focus如何实现事件委托
事件委托是利用事件冒泡机制的一种优化手段,如果有很多列表元素要绑定事件,那么就可以用事件委托来优化(不需要给每个元素都绑定事件).但是对于focus这种特殊的表单事件,它不会冒泡,那么又该如何实现这一 ...
- e.target与事件委托简例
target定义: target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素.文档或窗口. 语法: event.target event.target.nodeName // ...
- javaScript绑定事件委托 demo
事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行. 由此 事件委托 可以优化事件绑定行为.. 事件逐层冒泡 ...
- JQ 为未来元素添加事件处理器—事件委托
随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供 ...
- 事件委托live,delegate,on区别
事件委托 我们知道,DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一 ...
随机推荐
- python学习——如何判断输入是数字
笨办法学python第35节 该节主要是讲分支与函数,主要遇到的问题是python中如何判断输入是数字. 首先原代码如下: from sys import exit def gold_room(): ...
- CIB Training Scripts For TPC-H Benchmark
http://52.11.56.155:7180/http://52.11.56.155:8888/ impala-shell -i 172.31.25.244 sudo -u hdfs hdfs d ...
- 修改加粗cmd和powershell命令行的中文字体
powershell 传教士 原创文章 2016-06-20 允许转载,但必须保留名字和出处,否则追究法律责任 ---[前言]--- 1 环境: win10 10586 powershell 5.0 ...
- 关于lambda表达式的一些学习——基于谓词筛选值序列
今天看了一些关于lambda表达式的知识,然后对于Func<T,TResult>泛型委托不太熟悉,便查了查相关资料,又引出来了基于谓词筛选值序列这个对我来说的新鲜知识点,于是去查MSDN, ...
- hihoCoder#1094
刚开始学习C语言,准备在做hiho的题目的过程中来学习,在此进行记录,如果代码中有错误或者不当的地方还请指正. 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Littl ...
- 关于css样式1
背景色 可以使用 background-color 属性为元素设置背景色.这个属性接受任何合法的颜色值. 这条规则把元素的背景设置为灰色: p {background-color: gray;} 如果 ...
- 【转】Nginx中upstream有以下几种方式:
1.轮询(weight=1) 默认选项,当weight不指定时,各服务器weight相同, 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除.upstream bak ...
- AngularJS时间轴指令
是基于ion.rangeSlider.js,主要代码如下: <link rel="stylesheet" type="text/css" href=&qu ...
- 如何使用.NET开发全版本支持的Outlook插件产品(四)——进阶探讨
插件项目所有代码都已经上传至 https://github.com/VanPan/TestOutlookAdding 如何定制Ribbon在不同界面的显示 实际使用过程中出现的问题 这个问题的来自十分 ...
- django常见小问题收集(转)
1.当我把 DEBUG = True设为False的时候运行 python manage.py runserver 的时候 报错 : CommandError: You must set settin ...