zoukankan      html  css  js  c++  java
  • JS循环添加事件

    通常我们会这样给元素添加事件:

    var ul=document.getElementsByTagName("ul")[0]; 
    var list=document.getElementsByTagName("li");
    for(var i=0;i<li.length;i++){ list[i].onclick=function(){ alert("我的index是"+i); } }

    但结果往往不是我们想象的那样,它们全部弹出是“我的index是2”,原因是JavaScript是单线程执行任务的,添加事件会被罗列到任务单中,所以i的值全是2;

    解决方法:

    方式1. 使用闭包。
    var ul = document.getElementsByTagName("ul")[0];  
    var list = ul.getElementsByTagName("li");  
    function foo(){ for(var i = 0, len = list.length; i < len; i++){ var that = list[i]; list[i].onclick = (function(k){ return function(){ alert("我的index是"+k);
    }; })(i); } } foo();
    方式2.事件代理
    var ul = document.querySelector('ul');  
    var list = document.querySelectorAll('ul li');  
      
    ul.addEventListener('click', function(){  
        var e = arguments[0] || window.event;  
        var target = e.target || e.srcElement;  
      
        for(var i = 0, len = list.length; i < len; i++){  
            if(list[i] == target){  
                alert("我的index是"+i);   
    } } });
    方式3. 引入jQuery,使用其中的on或delegate进行事件绑定(它们都有事件代理的特性)
    // delegate方法
    $("ul").delegate("li", "click", function(){  
        var index = $(this).index();  
        var info = $(this).html();  
        alert(index + "----" + info);  
    });  
     // on方法
    $("ul").on("click", "li", function(){  
        var index = $(this).index();  
        var info = $(this).html();  
        alert(index + "----" + info);  
    });
    方式4. 使用ES6中的新特性let来声明变量用let来声明的变量将具有块级作用域,很明显可以达到要求,不过需要注意的是得加个'use strict'(使用严格模式)才会生效。
    var ul = document.getElementsByTagName("ul")[0];  
    var list = ul.getElementsByTagName("li");  
      
    function foo(){'use strict'  
        for(let i = 0, len = list.length; i < len; i++){  
            list[i].onclick = function(){  
                alert(i + "----" + this.innerHTML);  
            }  
        }  
    }  
    foo();  

    仅供参考,如有错误请指正!

  • 相关阅读:
    poj2411
    poj2403
    poj2479
    poj2593
    跟着B站UP主小姐姐去华为坂田基地采访扫地僧
    云小课 | 不小心删除了数据库,除了跑路还能咋办?
    GaussDB(for MySQL)如何在存储架构设计上做到高可靠、高可用
    华为侯金龙:打造行业智能体,共建全场景智慧
    华为轮值董事长郭平2020全联接大会主题演讲:永远面向阳光,阴影甩在身后
    【API进阶之路】太秃然了,老板要我一周内检测并导入一万个小时的视频
  • 原文地址:https://www.cnblogs.com/dongdongseven/p/7141146.html
Copyright © 2011-2022 走看看