如何将onclick侦听器添加到由gatsby-transformer-remark自动生成的元素上？

Question

我正在将Gatsby.js与插件gatsby-transformer-remark一起使用，以将降价文件显示为页面，如the official docs中所述。

它的效果很好，但是我正在寻找一种将onclick侦听器添加到所有从markdown转换的脚注链接的方法。

当前，gatsby-transformer-remark在下面生成这种HTML。

// markdown
some long text. [^1]
...
[^1]: footnote description 

// html generated by 'gatsby-transformer-remark'

<p>some long text. 
  <sup id="fnref-1">
    <a href="#fn-1" class="footnote-ref">1</a>
  </sup>
</p>

...

<ol>
  <li id="fn-1">
    <p>footnote description</p>
    <a href="#fnref-1" class="footnote-backref">↩</a>
  </li>
</ol>

我想要实现的是这样的：

<p>some long text. 
  <sup id="fnref-1">
    <a href="#fn-1" onclick="displayModal();" class="footnote-ref">1</a>
  </sup>
</p>

...

<ol>
  <li id="fn-1">
    <p>footnote description</p>
    <a href="#fnref-1" class="footnote-backref">↩</a>
  </li>
</ol>

Answer 1

我能够通过以下方式添加此功能

footerElement.addEventListener("click", this.someFunc);。

但是，有一种更优雅的方法可以做到这一点。