How to add event listeners to rendered chtml?

I want to dynamically render math blocks, and convert content to chtml: The following code works fine:

document.body.append(MathJax.tex2chtml('\\sqrt{x^2+1}', {em: 12, ex: 6, display: false})); 

But what if I can only use it's content, rather than directly add it to the page?

// Render HTML
function before(content) {
  const equation = ...;
  const equationHTML = MathJax.tex2chtml(equation, {em: 12, ex: 6, display: false}).outerHTML;
  html = replace(equation, equationHTML)
  // only can return string, rather than DOM elements
  return html;
}

function after(html) {
  // ...
}

For both Mathjax V2 and V3, I wonder after I appended chtml into specific DOM element, how can I add listeners (like right-click context menu)? Since there are no method called getEventListeners, so I can't do any restore behaviors just like innerHTML.

Currently, I have to do something like:

// Render HTML
function before(content) {
  const equation = ...;
  // Need to escape equations to prevent default behaviours when convert content to hmtl
  const equationHTML = '<div id='equation'>escape(equation)</div>';
  html = replace(equation, equationHTML)
  // only can return string, rather than DOM elements
  return html;
}

function after(html) {
  // ...
}

function done() {
  MathJax.typesetPromise([docuement.querySelector('#equation')]);
}

To make sure that elements will have listeners, because the element rendered by MathJax directly.