闭包在DOM中的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
<script>
    var lis = document.getElementsByTagName(‘li‘);
    for (var i = 0; i < lis.length; i++) {
        (function(i){
            lis[i].addEventListener(‘click‘,function(e){
                console.log("li",lis[i].innerText);
            },false);
        })(i)
    }
</script>
</html>

目的:保证索引值不被污染,因为变量i是全局变量。

时间: 2024-10-17 06:23:19

闭包在DOM中的使用的相关文章

揭秘DOM中data和nodeValue属性同步改变那些事

问题引发:最近在整理DOM系列的一些知识点,发现在DOM的某些接口API中,存在一些我想不通的现象.就随便举个例子吧:DOM文档模型中的文本节点,可以通过nodeValue或data属性访问文本节点的文本内容,而且在更新data的时候nodeValue也即时更新,反之亦然.不光是data或nodeVaulue有这种相互影响的关系,其他类型节点也有比如该改变document.title也会随之改变网页标题.当时想弄明白这在JS引擎中是怎么实现的,于是乎进行了以下分析:通过文本节点的原型链继承关系

JQ中的clone()方法与DOM中的cloneNode()方法

JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(deep);  其接收一个可选参数"deep",为布尔类型,默认是false. 当设置为true,克隆当前节点,属性及当前节点的后代.若设置为false,仅仅克隆当前元素节点本身. 扩展:  使用cloneNode()方法,当被克隆的节点绑定了事件处理程序,事件处理程序是否会被一同克隆,这个我

DOM中的动态NodeList与静态NodeList

GitHub版本: https://github.com/cncounter/translation/blob/master/tiemao_2014/NodeList/NodeList.md 副标题: 为何getElementsByTagName()比querySelectorAll()快100倍 昨天,我在雅虎的同事 Scott Schiller (斯科特·席勒, 同时也是SoundManager创造者) 发Twitter询问为何getElementsByTagName("a") 在

HTML中常见的各种位置距离(clientTop clientLeft clientWidth ClientHeight offsetleft offsettop offsetwidth offsetheight等等)以及dom中的坐标讨论

最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的不好或者写错了,欢迎各位指正.好了废话不多说,开始进入主题. 这篇文章主要讨论两点: 一.DOM中各种宽度.高度 二.DOM中的坐标系 下面我们看看DOM中都有一些什么宽度.高度. 常见的 offsetWidth clientWidth scrollWidth offsetHeight client

javascript判断元素存在和判断元素存在于实时的dom中的方法

今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动页面,然后问题就出来了:页面无法向下滚动,调试工具的console里报了好多undefined的错误. 我马上意识到是我写的js代码错误的在首页被执行导致的问题,我的代码大致是这样: 1 if ($('#a')) { 2 // some code ... 3 $('#b').doSomething;

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes    子节点 firstChild    父节点里的第一个子节点 lastChild     父节点里的最后一个子节点 nextSibling    与子节点并列的下一个兄弟节点 previousSibling   与子节点并列的上一个兄弟节点 火狐与谷歌支持而ie8不支持的节点关系有: previous

DOM中的NodeList与HTMLCollection

最近在看<Javascript高级程序设计>的时候,看到了这样一句话:“理解NodeList和HTMLCollection,是从整体上透彻理解DOM的关键所在.”,所以觉得应该写一篇关于NodeList和HTMLCollection的博客来好好了解和总结下这方面的知识点. NodeList NodeList是一个节点的集合(既可以包含元素和其他节点),在DOM中,节点的类型总共有12种,通过判断节点的nodeType来判断节点的类型. 我们可以通过Node.childNodes和documen

js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息.所有浏览器对象都支持event对象,但支持方式不同. DOM中的事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中.无论指定事件处理程序时使用什么方法(DOM0级或DOM2级),都会传入event

window.event对象在IE与DOM中的异同

window.event对象在IE与DOM中的区别 1.window.event IE:有window.event对象 DOM:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=domousemove(event) <input type="button" onmousemove="showDiv(event);"//event不需要加引号 function showDiv(event) { var event