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

如何监听 JS 动态添加的 DOM 对象?

  •  
  •   pdog18 · 2021-06-09 11:21:44 +08:00 · 2670 次点击
    这是一个创建于 1254 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我在写一个油猴脚本,有一个页面会有动态生成的列表,导致在 window.onload 或者 window.addEventListener ("load" 尝试通过 document.getElementsByClassName 获取列表中的 DOM 总是 undefined 。 我猜测是这两个生命周期执行的时候,DOM 还未被加载,有什么生命周期可以让我总是能获取到这个 DOM 吗?

    11 条回复    2021-06-10 16:16:30 +08:00
    Rache1
        1
    Rache1  
       2021-06-09 11:23:30 +08:00
    事件委托
    Rache1
        2
    Rache1  
       2021-06-09 11:24:56 +08:00   ❤️ 1
    @faqqcn 如果你想在新加入的节点添加事件,就是用事件委托,如果你只是想知道新的节点进来,可以用 MutationObserver
    pdog18
        3
    pdog18  
    OP
       2021-06-09 11:25:40 +08:00
    谢谢,我去查一下你说的这些东西
    xu2060
        4
    xu2060  
       2021-06-09 11:26:13 +08:00
    动态生成元素的时候,行内绑定事件,然后把自己作为事件的参数传进去,最后去绑定的事件里面进行操作就好了。
    newmlp
        5
    newmlp  
       2021-06-09 11:32:25 +08:00
    pdog18
        6
    pdog18  
    OP
       2021-06-09 11:37:20 +08:00
    @xu2060 额,JS 添加 DOM 的代码不是我写的,我是在写一个油猴脚本,所以我修改不了这里的源码绑定事件
    pdog18
        7
    pdog18  
    OP
       2021-06-09 11:39:18 +08:00
    我通过 mutation-observer 对 container 进行了 observer,感觉能这样先凑合用了
    love
        8
    love  
       2021-06-09 11:39:38 +08:00   ❤️ 1
    写个油猴没必要杀鸡用牛了吧,直接 setInterval 每秒 getElementsByClassName 看看是不是 undefined,是则处理并 clearInterval
    no1xsyzy
        9
    no1xsyzy  
       2021-06-09 12:51:12 +08:00   ❤️ 3
    @love 不要 setInterval,可能导致卡死,宁可反复 setTimeout
    而且 mutation observer 简单封装后很方便,就是 observe(selector, callback)
    Baymaxbowen
        10
    Baymaxbowen  
       2021-06-09 12:54:03 +08:00
    getSnapshotBeforeUpdate ?
    Rhilip
        11
    Rhilip  
       2021-06-10 16:16:30 +08:00   ❤️ 2
    我觉得以上都是没写过油猴脚本的,
    建议直接用别人写好的库
    https://greasyfork.org/zh-CN/scripts/5679-wait-for-elements
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5363 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 07:18 · PVG 15:18 · LAX 23:18 · JFK 02:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.