主页 / 问题 / 1550016
Accepted
Reiji Akkerman
Asked:2023-11-07 02:10:57 +0800 CST2023-11-07 02:10:57 +0800 CST

这使用 addEventListener [重复]

  • 772

它是这样alert工作的：

class Test {
    #shown;

    constructor() {
        this.#shown = 'hello';
        this.showMessage.bind(this);
    }

    showMessage() {
        alert(this.#shown);
    }
}

var test = new Test;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="container">
            <button class="element" onclick="test.showMessage();">кнопка</button>
        </div>
        <script src="test.js"></script>
    </body>
</html>

但alert它不是这样工作的：

class Test {
    #shown;

    constructor() {
        this.#shown = 'hello';
        this.showMessage.bind(this);
    }

    showMessage() {
        alert(this.#shown);
    }
}

var test = new Test;

document.addEventListener('DOMContentLoaded', function() {
    let element = this.querySelector('.element');
    element.addEventListener('click', test.showMessage);
})
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="container">
            <button class="element">кнопка</button>
        </div>
        <script src="test.js"></script>
    </body>
</html>

为什么alert() 在第二种情况下不起作用，如果在这两种情况下我将事件绑定到同一个元素，并且在这两种情况下我都使用bind() 以便它始终在Test 类的上下文中？

javascript

1 个回答

  1. Best Answer

    在第二个示例中，问题与上下文有关；在 中使用的函数中addEventListener，它不是一个对象test，而是一个按钮element，它没有必要的方法和属性。

    例如，您可以通过两种方式解决：

    在构造函数中，将上下文绑定到函数，如下所示：

    this.showMessage = this.showMessage.bind(this);

    或者如问题的评论中所示 - 将函数更改为使用上面上下文的箭头函数：

    element.addEventListener('click', () => { test.showMessage() });

    class Test {
    constructor() {
        this.shown = 'hello';
        this.showMessage = this.showMessage.bind(this);
    }

    showMessage() {
        alert(this.shown);
    }
}

var test = new Test;

document.addEventListener('DOMContentLoaded', function() {
    let element = this.querySelector('.element');
    element.addEventListener('click', test.showMessage);
})
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="container">
            <button class="element">кнопка</button>
        </div>
        <script src="test.js"></script>
    </body>
</html>

    • 1

相关问题