JS_增加事件,移除事件,动态元素的增删事件

最新推荐文章于 2025-03-23 00:07:22 发布

原创最新推荐文章于 2025-03-23 00:07:22 发布 · 4.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

Javascript 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何在静态页面和动态生成元素中管理内存并正确处理事件监听器的添加与移除。通过示例代码展示了如何避免内存泄漏，尤其是在动态添加DOM元素时释放不再使用的事件处理函数。

/*
 * 静态页面要施放因(add)此元素添加事件的内存.
 */
<input id="add" type="button" value="add" />
<input id="det" type="button" value="det" />
<script type="text/javascript">
(function(){
    var add = document.getElementById("add");
    var det = document.getElementById("det");
    /*增加事件*/
    ~function(){
        var str = new Array(1000).join(new Array(5000).join("xxxxx"));
        add.onclick = function(){
            var arr = [];
            arr.push(str);
            }
        }();
    /*移除事件*/
    ~function(){
        det.onclick = function(){
            add.onclick = null;
            }
        }();
})();
</script>

/*
 * 动态添加的元素施放内存.
 */
<input id="add" type="button" value="add" />
<input id="det" type="button" value="det" />
<div id="box"></div>
<script type="text/javascript">
(function(){
    var add = document.getElementById("add");
    var det = document.getElementById("det");
    var box = document.getElementById("box");
    /*增加事件*/
    ~function(){
        var str = new Array(1000).join(new Array(5000).join("xxxxx"));
        add.onclick = function(){
            var temp = document.createElement("div");
            temp.id = "hello";
            temp.className = "hello"
            box.appendChild(temp);
            temp.onclick = function(){
                var arr = [];
                arr.push(str);
                }
            }
        }();
    /*移除事件*/
    ~function(){
        det.onclick = function(){
            document.getElementById("hello").onclick = null;
            add.onclick = null;
            }
        }();
})();
</script>