outerHTML和eventListener

Question

我有一个简单的代码：

​

document.getElementById("number").addEventListener('click', test);
var i = 1;
function test(event) {
    document.getElementById("number").outerHTML = '<span id="number">' + (i++) + '</span>';
}

<span id="number">0</span>

​

但这只适用于第一次点击。下一个eventListener不起作用。怎样才能让它发挥作用呢？

Answer 1

您可以尝试使用innerHTML而不是outerHTML (后者重新创建元素；事件侦听器不再添加)0

<script>
    document.getElementById("number").addEventListener('click', test);
    var i = 1;
    function test(event) {
        document.getElementById("number").innerHTML = i++;
    }
</script>

否则，您可以这样重置事件侦听器，同时仍然使用outerHTML。

<span id="number">0</span>

<script>
    document.getElementById("number").addEventListener('click', test);
    var i = 1;
    function test(event) {
        document.getElementById("number").outerHTML = '<span id="number">' + (i++) + '</span>';
        document.getElementById("number").addEventListener('click', test);

    }
</script>

Answer 2

​

document.getElementById("number").addEventListener('click', test);
var i = 1;
function test(event) {
    this.innerHTML = i++;
}

<span id="number">0</span>

​

不要使用outerHTML，它返回DOM内容，而您正在创建另一个span，因此事件侦听器无法工作，以替代内部内容使用innerHTML。

Answer 3

我想你想要这样的东西。

​

    document.getElementById("number").addEventListener('click', test);
    function test(event) {
        var obj = document.getElementById("number");
        console.log(obj.innerHTML);
        var i = parseInt(obj.innerHTML);
        obj.innerHTML = ++i;
    }

<span id="number">0</span>

​

不需要使用outerHTML，否则每次单击时都需要添加侦听