删除内联onclick事件跟踪代码并将其放入外部文件中

Question

我在链接标签(onclick=""(上附加了许多跟踪代码，这些代码分散在我的页面上，看起来非常混乱。

看起来，

<a href="tel:[phone]" onclick="gtag('event', 'click', { 'event_category': 'Phone', 'event_label': 'Header phone link' });">[phone]</a>

我想知道是否可以将它们全部删除并移到外部js文件中，以保持页面的整洁和可读性。如果是，我该怎么做？

Answer 1

当然。考虑：

index.html

<a href="tel:[phone]" id="header-phone">[phone]</a>

app.js

document.getElementById("header-phone").addEventListener("click", function() {
gtag('event', 'click', { 'event_category': 'Phone', 'event_label': 'Header phone link' });
});

然后，在index.html的底部，使用<script>链接app.js