如果它是在页面加载后由js创建的，那么如何在html片段上运行eventlistener？

Question

我有一个移动的框架在A框架，

<a-entity id="myboxes">
   <a-box id="mybox" material="src: #material" width="0" height="4" depth="0.4" transparent="true" opacity="0.75" position="-5 -1.3 -15" rotation="0 0 0" scale="2 0.5 3">
      <a-animation attribute="position" to="0 0 5" fill="forwards" dur="5000"></a-animation>
    </a-box>   
</a-entity>

我想把它放到一个新位置，如果它到达动画结束的最终位置，或者我点击它。我试过这样的：

document.getElementById("mybox").addEventListener('componentchanged', function(){
     if((document.getElementById("mybox").getAttribute('position').x >-1) && (document.getElementById("mybox").getAttribute('position').y >-1) && (document.getElementById("mybox").getAttribute('position').z >4.8)){
        newBox();
     }
});

function newBox() {
        var X = 0;
        var Z = 0;

        var val = Math.floor((Math.random() * 50) + 20);
        var plusOrMinus = Math.random() < 0.5 ? -1 : 1;
        X = val * plusOrMinus;
        val = Math.floor((Math.random() * 50) + 20);
        plusOrMinus = Math.random() < 0.5 ? -1 : 1;
        Z = val * plusOrMinus;
        console.log("X: " + X + " Z: " + Z);
        document.getElementById('mybox').setAttribute('position', X + " -1.3 " + Z);
}

但这不起作用，所以我尝试这样：

document.getElementById("mybox").addEventListener('componentchanged', function(){
     if((document.getElementById("mybox").getAttribute('position').x >-1) && (document.getElementById("mybox").getAttribute('position').y >-1) && (document.getElementById("mybox").getAttribute('position').z >4.8)){
        document.getElementById("myboxes").innerHTML = "";
        newBox();
     }
});

function newBox() {
        var X = 0;
        var Z = 0;

        var val = Math.floor((Math.random() * 50) + 20);
        var plusOrMinus = Math.random() < 0.5 ? -1 : 1;
        X = val * plusOrMinus;
        val = Math.floor((Math.random() * 50) + 20);
        plusOrMinus = Math.random() < 0.5 ? -1 : 1;
        Z = val * plusOrMinus;
        console.log("X: " + X + " Z: " + Z);
        document.getElementById("myboxes").innerHTML = '<a-box id="mybox" material="src: #material" width="0" height="4" depth="0.4" transparent="true" opacity="0.75" position="' + X + ' -1.3 ' + Z + '" rotation="0 0 0" scale="2 0.5 3"> <a-animation attribute="position" to="0 0 5" fill="forwards" dur="5000"></a-animation></a-box>';
}

但是这样盒子只出现两次，一次是在页面加载和HTML运行时，再一次是在执行EventListener时。但为什么不运行第三，第四等时间呢？我该如何解决这个问题？

Answer 1

使用处理程序将代码解压缩到函数：

function rebindBox() {
    document.getElementById("mybox").addEventListener('componentchanged', function(){
        if((document.getElementById("mybox").getAttribute('position').x >-1) && 
           (document.getElementById("mybox").getAttribute('position').y >-1) && 
           (document.getElementById("mybox").getAttribute('position').z >4.8)) {
            document.getElementById("myboxes").innerHTML = "";
            newBox();
        }
    });
}

并在重新创建后调用它：

document.getElementById("myboxes").innerHTML = '<a-box id="mybox" material="src: #material" width="0" height="4" depth="0.4" transparent="true" opacity="0.75" position="' + X + ' -1.3 ' + Z + '" rotation="0 0 0" scale="2 0.5 3"> <a-animation attribute="position" to="0 0 5" fill="forwards" dur="5000"></a-animation></a-box>';
rebindBox();

Answer 2

如果您在每次创建时将事件侦听器添加到框中，它就会起作用：

document.getElementById("myboxes").innerHTML = (....)
document.getElementById("mybox").addEventListener('componentchanged', listenerfnc)

就像我做了here。

---

但IMO你应该采用不同的方法。

1）如果你需要改变位置然后改变位置而不是覆盖整个innerHTML：

var newPosition = new THREE.Vector3( randomX, randomY, randomZ );
mybox.setAttribute("position", newPosition)

并重新启动动画：

a）设置动画开始的开始事件：

<a-animation begin="start">

b）发射它

animationReference.emit("start")

c）（可选）查看Ngo Kevins动画组件 它应该很快取代<a-animation>，所以我建议你习惯它。

---

2) Create the HTML element using document.createElement("a-box) instead of doing changes in the innerHTML

var box = document.createElement("a-box")
box.setAttribute("position", newPos)
box.addEventListener("event", callback)
sceneReference.appendChild(box)