javascript - 如果页面加载后由 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

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

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

就像我一样here .

---

但是在我看来，您应该以不同的方式处理它。

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) 使用 document.createElement("a-box) 创建 HTML 元素而不是在 innerHTML 中进行更改

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