javascript closure 闭包 事件绑定
先来一个基本的例子
<!-- 实现一段脚本，使得点击对应链接alert出相应的编号 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<a href='#'> 第一个链接 </a> </br>
<a href='#'> 第二个链接 </a> </br>
<a href='#'> 第三个链接 </a> </br>
<a href='#'> 第四个链接 </a> </br>
<script type="text/javascript">
var lis = document.links;
for(var i = 0, length = lis.length; i < length; i++) {
(function(i) {
lis[i].onclick = function() {
alert(i + 1);
};
})(i);
}
</script>
</body>
使用addEventListener
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[closure click ex]">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<a href='#' id="a0"> 第一个链接 </a> </br>
<a href='#' id="a1"> 第二个链接 </a> </br>
<a href='#' id="a2"> 第三个链接 </a> </br>
<a href='#' id="a3"> 第四个链接 </a> </br>
</body>
<script>
var links = document.querySelectorAll('body>a');
// links.forEach(function(ele,idx){ //这是一个NodeList 是ArrayLike对象 不是真正的数组 是不能forEach的
// });
for (var i = links.length - 1; i >= 0; i--) {
links[i].addEventListener('click', (function(idx){
return function(e){
console.log(idx + ' ' + e.target.id);
};
})(i), false);
}; </script>
</html>
此题也可以不使用闭包来实现
//另外一种使用事件代理的方式 //没有使用闭包
var ul = document.querySelector('#ul1');
var lis = document.querySelectorAll('#ul1 .li-ele');
var lisArr = [];
for( i= 0; i< lis.length; i++){
lisArr.push(lis[i]);
}
//PS 注意 不能直接用lis.indexOf
//它是 NodeList 是类数组 没有 indexOf 方法
ul.addEventListener('click', function(e){
var target = e.target;
console.log(lisArr.indexOf(target));
}, false);
=========更新==========
然而上面的方式还是太笨了 下面这个既可以不用闭包也可以绑定上对应的事件
var doc = document;
var list = doc.querySelectorAll('ul li'); [].forEach.call(list, function(ele, index){
ele.addEventListener('click', function(){
console.log(index);
}, false);
});
javascript closure 闭包 事件绑定的更多相关文章
- JavaScript利用闭包循环绑定事件
我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用. 1.首先我们举一个简单的例子. html部分: <a href=& ...
- 理解Javascript中的事件绑定与事件委托
最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定 ...
- JavaScript 中 onload 事件绑定多个方法的优化建议
页面加载完毕时会触发 onload 事件.基于内容(HTML)要与行为(JavaScript)分离的编码思想,我们需要将一些对页面的初始化操作写在方法内,并通过window.onload = func ...
- JavaScript 中 onload 事件绑定多个方法
当需要调用的方法较多时,我们可以进一步优化,编写一个专门用于绑定 onload事件的方法: function addLoadEvent(func) { //把现有的 window.onload 事件处 ...
- jQuery 事件绑定 和 JavaScript 原生事件绑定
总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...
- JavaScript事件绑定的常见方式
在Javascript中,事件绑定一共有3种方式: ① 行内绑定 ② 动态绑定 ③ 事件监听 原文: https://mbd.baidu.com/newspage/data/landingsuper? ...
- js、jq事件绑定方式总结——以click事件为例
一.JavaScript点击事件绑定方法 1.1 HTML onclick事件属性 <button onclick="clickMe(this)">click me&l ...
- 深入理解JavaScript的闭包特性如何给循环中的对象添加事件
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
- 在Javascript中闭包（Closure)
在Javascript中闭包(Closure) 什么是闭包 “官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. ...
随机推荐
- DOM4J读取XML文件
最近在做DRP的项目,其中涉及到了读取配置文件,用到了DOM4J,由于是刚开始接触这种读取xml文件的技术,好奇心是难免的,于是在网上又找了一些资料,这里就结合找到的资料来谈一下读取xml文件的4中方 ...
- cmd命令行--切换盘符
- 栈的实现 -- 数据结构与算法的javascript描述 第四章
栈 :last-in-first-out 栈有自己特殊的规则,只能 后进入的元素 ,最先被推出来,我们只需要模拟这个规则,实现这个规则就好. peek是返回栈顶元素(最后一个进入的). /** * 栈 ...
- 权威指南之脚本化http
使用javascript代码操作http是可行的.当用脚本设置window对象的location属性或调用表单对象的submit方法时,都会初始化http请求.这两种情况下,浏览器会加载新页面. aj ...
- JavaScript之ClassName属性学习
在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式,你 ...
- 关于消息推送和service的一些调查-清理内存通知栏点击无响应
起因:做了两个带推送的app:HiApp和WeApp,前者个推,后者百度推送,但前者有一个小缺陷. 现象:两部手机 1.htcD820t手机,运行中的app利用自带的关闭最近程序后,通知栏不清理该ap ...
- springmvc＋mybatis集成配置
简单之美,springmvc,mybatis就是一个很好的简单集成方案,能够满足一般的项目需求.闲暇时间把项目配置文件共享出来,供大家参看: 1.首先我们来看下依赖的pom: <!-- spri ...
- Redis Sentinel的Redis集群(主从&Sharding)高可用方案
在不使用redis3.0之后版本的情况下,对于redis服务端一般是采用Sentinel哨兵模式,也就是一主多备的方式. 这里,先抛出三个问题, 问题1:单节点宕机数据丢失?问题2:多节点(节点间没有 ...
- bzoj 1066 : [SCOI2007]蜥蜴 网络流
题目链接 给一个n*m的图, 里面每一个点代表一个石柱, 石柱有一个高度. 初始时有些石柱上面有蜥蜴, 蜥蜴可以跳到距离他曼哈顿距离小于等于d的任意一个石柱上,跳完后, 他原来所在的石柱高度会减一, ...
- 每天一个小算法（4）----在O(1)时间删除指定结点
O(1)时间内删除结点的思路只能是复制该结点下一个结点的数据,然后删除该结点的下一个结点,来等效删除此结点. 需要注意的地方是删除头结点和尾结点的处理. #include <stdio.h> ...