V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
lisisi
V2EX  ›  JavaScript

可以在 for 循环里,添加 btn.addEventListener("click", function(){...} 事件吗?

  •  
  •   lisisi · 2020-05-27 08:49:58 +08:00 · 3191 次点击
    这是一个创建于 1640 天前的主题,其中的信息可能已经有所发展或是发生改变。

    可以在 for 循环里,使用 btn.addEventListener("click", function(){...} 吗?

    <script type="text/javascript">
        var btns = document.getElementsByTagName("button");
        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click", function(){
                // do something;
            });
        }
    </script>
    
    16 条回复    2020-05-27 16:03:09 +08:00
    yuanfnadi
        1
    yuanfnadi  
       2020-05-27 08:52:12 +08:00 via iPhone   ❤️ 4
    可以,不过事件会冒泡,在父元素捕获的话,只需要一次。
    Mutoo
        2
    Mutoo  
       2020-05-27 08:55:42 +08:00
    另外还要注意 i 的引用问题。建议使用 arrow function,否则 function 引用的是闭包外的 i,当 click 事件触发时 i 永远是 btns.length
    Perry
        3
    Perry  
       2020-05-27 08:57:44 +08:00
    建议用 1 楼的方法在父元素捕获
    Yumwey
        4
    Yumwey  
       2020-05-27 09:02:34 +08:00 via Android
    用事件委托
    sybb
        5
    sybb  
       2020-05-27 09:27:37 +08:00
    这会都绑定在最后一个 btn 上吧
    TomatoYuyuko
        6
    TomatoYuyuko  
       2020-05-27 09:30:48 +08:00
    事件委托就是干这个的,你这么写太笨了
    mengxzhou
        7
    mengxzhou  
       2020-05-27 09:55:10 +08:00
    用事件委托绑定在上层节点
    shyangs
        8
    shyangs  
       2020-05-27 09:56:42 +08:00
    goog
    js 事件代理 事件委托
    Losses
        9
    Losses  
       2020-05-27 10:02:04 +08:00   ❤️ 1
    单层:
    ```
    document.addEventListener('click', (event) => {
    if (event.target.tagName !== 'BUTTON') return;
    // do something;
    })
    ```

    如果是多层的话:
    ```
    document.addEventListener("click", event => {
    if (!event.target.closest("button")) return;
    console.log("Doing something");
    });
    ```

    Demo:
    https://codesandbox.io/s/compassionate-williams-09ssq

    只是一个思路,供参考
    luogege
        10
    luogege  
       2020-05-27 10:13:31 +08:00 via Android
    把 var 换个 let 比较好
    violetlai
        11
    violetlai  
       2020-05-27 10:29:57 +08:00
    target 来做会好一些
    Doracis
        12
    Doracis  
       2020-05-27 10:32:06 +08:00
    之前在网上看到冒泡捕获的例子,好像就是你这个问题,我记得是可以把监听绑在父层去调用,具体代码你搜冒泡捕获关键字,在简书还是 cnblog 上就有的
    Doracis
        13
    Doracis  
       2020-05-27 10:33:39 +08:00
    @Doracis 用原生有点别手,如果有框架的话就方便多了,可以试试呀
    CodingNaux
        14
    CodingNaux  
       2020-05-27 10:40:47 +08:00
    《 JavaScript 高级程序设计》或者《 javascript 权威指南》两者选一本看看
    lvming6816077
        15
    lvming6816077  
       2020-05-27 11:09:05 +08:00
    如果在回调里获取 i 会始终是一个值,参考 JavaScript 闭包
    minglanyu
        16
    minglanyu  
       2020-05-27 16:03:09 +08:00
    事件委托
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2916 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:09 · PVG 08:09 · LAX 16:09 · JFK 19:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.