Question

高分请教,js的DOMNodeRemoved事件如何在删除节点之后才执行这个事件呢

我的需求如下:
监听当某个节点下的子节点被删除后获取该DOM节点的高度
必须使用这种事件监听机制,因为监听的节点不一,而且他的高度没有固定值\
所以我的想法是js中最好有一个默认事件是删除节点后出发.这样删除了节点后我可以直接取得父节点的高度.

使用js的DOMNodeRemoved事件可以捕获到删除事件,但是该事件实在删除之前执行的.
也就是执行这个事件的时候该节点并未删除,所以我无法取得删除后的父节点的高度.

我想要在删除之后执行这个事件,请教高手如何处理,是否可以自己封装一下来实现这个功能
例<div id="d1"><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p></div>
以上述代码为例:绑定$("#d1").bind("DOMNodeRemoved", function(e){ ,当我执行删除某个p标签时会执行这个函数,但是只有执行完这个函数后js才会删除p标签,所以我无法能知道删除后的div的高度

Answer 1

猜楼主是想实现自动调节高度，你可以考虑在
DOMNodeRemoved事件中使用settimeout，设置一个合适的延时，再去获取父元素的高度即可

追问

我是实现滚动条插件, 当元素删除时需要重新设置滚动条的高度和位置
所以我需要删除后某一元素后该节点的高度,
DOMNodeRemoved这个事件中可不可以通过event手动执行删除或者停止event后续的事件
event.cancelBubble为false.貌似不能停止该事件.不知道有什么方法可以实现呢

追答

    <style>
    #p{width: 500px;margin: 0 auto;border: 1px solid #ccc;}
    #c{height: 30px;background: #eee;}
    #a{height: 60px;background: #ddd;}
    </style>
    <div id="p">
        <div id="c">sss</div>
        <div id="a">bbb</div>
    </div>
    <script>
    function $(s){
        return document.getElementById(s);
    }
    
    $("c").addEventListener("DOMNodeRemoved",function(e){
        setTimeout(function(){
            alert($("p").offsetHeight)
        },20);
    },false);

    $("c").onclick = function(){
        $("p").removeChild(this);
    }
    </script>

 

此事件是不可以取消的，如果你想实现的话，只能去模拟这个事件了

Answer 2

楼主可以试下这个函数。

DOMSubtreeModified
对于document，该事件很常见。只要document的任何地方发生变化，浏览器就会派发该事件。
所以可以用该事件代替以上列举的那些具体的事件。
1、当document发生单一的变化时，浏览器会派发该事件；
2、Document同时或非常快速连续的发生多个变化时，浏览器会根据各自的规则来处理合并这些变化，派发该事件。
事件目标对象 对应 事件所发生node的直接普通父元素。
注意：该事件是在改变之后派发。

追问

我试了一下,可以监听到事件,但是好像不是改变之后派发,我去监听id为list的一个ul标签变化,并弹出ul的高度
$("#list").bind("DOMSubtreeModified",function(e){
alert($(e.target).height());
});
当我删除ul下li时,在alert弹出时该li并未删除.
试了以下好像firefox下不好使,其他的可以

追答

找不到符合条件的事件，无能为力。

Answer 3

有必要这么复杂啊，我觉的简单封装个自己的delete方法就行了。

function myDel(obj){
    var pobj=obj.parentNode;
    pobj.removeChild(obj);
    var height=pobj.offsetHeight;
    //接着执行其他操作如设置你的滚动条   
    
}

 删除p的时候都调用myDel就行了。

追问

我做的是插件, 初始化之后插件去监听事件.不需要调用者去操作