在 Google 中编写的事件侦听器中的单击事件关闭不起作用？

Question

我是 JavaScript 的新手，我的问题是当我在 chrome 浏览器控制台中尝试这个 JS 时它有效，但在我的 JS 文件中没用

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

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 时，它向所有人显示错误
我用这个的时候点击事件没有反应
有没有其他最好的在线资源可以看

请帮助我

Answer 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，但我觉得这可能只是迈向更大目标的第一步，你会想这样做。

在 Google 中编写的事件侦听器中的单击事件关闭不起作用？

Click event in event listener written in Google Closure not working?

javascript

google-closure-library

google-material-icons