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

Question

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

看起来像，

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

我想知道是否可以将它们全部删除并移动到外部js文件以保持页面清洁和可读。 如果是这样，我该怎么办？

Answer 1

当然。 考虑：

的index.html

<a href="tel:+123456789" id="header-phone">+123456789</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.