Question

我有一个网页（Angular 2中的前端），我将一个简单的外部JavaScript脚本附加到index.html的HEAD。

现在，我希望从这个外部javascript将一些函数附加到onclick事件到某些按钮。

问题是，我有很多到这个网站的路线，每条路线都有不同的按钮。

外部javascript显然在网页加载时初始化一次，我无法绑定属于其他路由的其他DOM。

例如，如果我要路由/登录，并使用idlogin附加onclick到按钮，并刷新页面然后确定javascript将起作用。

但是如果我在路由/登录并附加onclick到idregister（属于不同的路由，例如/ register）的按钮注册并刷新页面然后javascript不能工作，因为按钮寄存器doenst属于这个路线。如果我再次将路由更改为/ register，则javascript无法正常工作。

所以一个可能的解决方案是，在加载外部javascript后，将所有DOMS连接到整个网页（来自所有路由），然后绑定我想要的功能。

我能这样做吗？

提前致谢！

编辑：请注意，onclick与某些按钮的绑定必须在外部javascript上发生。我不能写。所有DOM绑定必须在脚本上动态发生。

Answer 1

您需要使用事件委派。这是一个关于该方法的简单示例：

   /**
    * Example of DOM event delegation
    * @author: Georgi Naumov
    * gonaumov@gmail.com for contacts and suggestions
    **/
    window.addEventListener('click', function(event) {
        if(event.target && event.target.tagName && event.target.tagName === 'INPUT') {
          console.log('button is clicked');
       }
    });

此代码段将为所有按钮执行某些操作，包括将来创建的按钮。您可以在此处查看更多信息： What is DOM Event delegation? 您可能可以使用某些条件来仅分离您需要的按钮。

牢记在心：
这不是Angular方式。如果您在路由级别上有一些解决方案，可能会更好。

是否有可能将所有DOMS都放到整个网站（而不仅仅是一条路线）

1 个答案: