javascript - 是否有可能将所有 DOMS 获取到整个网站(不仅仅是一条路线)

Question

我有一个网页(Angular 2 中的前端)，我将一个简单的外部 javascript 脚本附加到 index.html 的头部。

现在，我想通过这个外部 javascript 将一些函数附加到一些按钮的 onclick 事件上。

问题是，我有很多通往该网站的路线，并且在每条路线上我都有不同的按钮。

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

例如，如果我要路由/login，并使用 idlogin 将 onclick 附加到按钮，并刷新页面，然后 OK，javascript 将工作。

但是，如果我在路由/login 并将 onclick 附加到使用 idregister 的按钮注册(属于不同的路由，例如/register)并刷新页面，则 javascript 将无法工作，因为按钮注册不属于此路由。如果我再次将路由更改为/register，则 javascript 将不起作用。

因此，一种可能的解决方案是，在加载外部 javascript 时将所有 DOMS 获取到所有整个网页(从所有路由)，然后绑定(bind)我想要的功能。

我可以这样做吗？

提前致谢!

编辑:请注意，onclick 与某个按钮的绑定(bind)必须发生在外部 javascript 上。我不会写。所有 DOM 绑定(bind)都必须在脚本上动态发生。

Answer 1

您需要使用事件委托(delegate)。这是关于该方法的一个简单示例:

   /**
    * 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 的方式。如果您在路由级别有一些解决方案，可能会更好。