用 Google Closure 编写的事件侦听器中的单击事件不起作用？答案

【问题标题】：Click event in event listener written in Google Closure not working?用 Google Closure 编写的事件侦听器中的单击事件不起作用？
【发布时间】：2018-09-23 04:53:28
【问题描述】：

我是 Java 新手脚本，我的问题是当我在 chrome 浏览器控制台中尝试这个 JS 时它可以工作，但在我的 JS 文件中它不工作

我附上了代码，对于 HTML 设计我使用了 google MDL，对于 JS 我使用了 Google Closure

HTML：

<HTML>
 <head>
    <script src="../closure-library/closure/goog/base.js"></script>
    <script src="../js/add.js"></script>
    <script src="../js/material.js"></script>
    <link rel="stylesheet" href="../css/material.css">
    <link rel="stylesheet" href="../css/test_add.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <div>
     <button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
       <i class="material-icons">add</i>
     </button>
   </div>
</body>
</HTML>

JS：

goog.provide('sample.add');

goog.require('goog.dom');
goog.require('goog.events');

sample.add = function() {
    self = this;
};
goog.inherits(sample.add, goog.base);
sample.add.prototype.bindEvent = function() {
    goog.events.listen(goog.dom.getElement('add'),
         goog.events.EventType.CLICK, function(e) {
            alert("HAPPY");
    });
};

这段代码有什么问题

当我尝试不使用 goog.provide 和 goog.require 时，它会向所有人显示错误
当我使用它时，点击事件没有反应
还有其他最好的在线资源可以查看

请帮帮我

【问题讨论】：

你有没有给bindEvent打电话？还将它添加为sample.add.prototype 的属性使其成为通过调用sample.add 作为构造函数创建的对象的继承方法。这是故意的吗？
我应该在哪里调用这个bindEvent方法来实现我无法理解的点击事件，sample.add.prototype使它成为通过调用sample.add作为构造函数创建的对象的继承方法。这是故意的吗？
请在问题中包含对您用于编写函数的bindEvent 文档的引用，或者您看到使用它的教程。
我的观点很简单，当我点击 html 中的添加按钮时，我需要提醒或某些功能应该完成，我需要使用 goog。事件。听方法来做到这一点不是本机 javascript 或 jquery

标签： javascript google-closure-library google-material-icons

【解决方案1】：

所以我要在这里更改一些内容。

最大的问题是您从不调用 sample.add 或 sample.add.bindEvent。

然后，您的脚本必须移动到您的按钮下方，以便在您的脚本运行时该按钮位于页面上。或者你可以使用 JS 来延迟脚本运行，这取决于你，但我会说，在 body 标签结束之前看到脚本是很常见的。

<HTML>
 <head>
    <script src="../closure-library/closure/goog/base.js"></script>
    <script src="../js/material.js"></script>
    <link rel="stylesheet" href="../css/material.css">
    <link rel="stylesheet" href="../css/test_add.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <div>
     <button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
       <i class="material-icons">add</i>
     </button>
   </div>
   <script src="../js/add.js"></script>
</body>
</HTML>

另外，除非您特别需要，否则我会放弃 goog.base 调用。如果您确实需要，请解释原因，也许我们可以提供帮助。

最后我们只需要一些细微的调整；

goog.provide('sample.add');

goog.require('goog.dom');
goog.require('goog.events');
/** @export */
sample.add = function() {
    self = this;
    self.bindEvent();
};
sample.add.prototype.bindEvent = function() {
    goog.events.listen(goog.dom.getElement('add'),
         goog.events.EventType.CLICK, function(e) {
            alert("HAPPY");
    });
};
sample.add();

我想你可以直接调用 sample.add.bindEvent，但我觉得这可能只是迈向更大目标的第一步，你会想走这条路。

【讨论】：

感谢重播，它工作但在 JS 中。添加。原型。绑定事件（）；而不是这个。绑定事件（）；我能知道为什么吗