Replace an element but preserve all element data

Question

I need to somehow replace an element in the DOM, but make the new element contain all the data the original had (attributes, event listeners, properties). This needs to be done in vanilla JavaScript (no jQuery, etc) and I can't control the HTML.

My current approach was to use element.replaceWith() and reassign attributes with a for loop. However, this only copied attributes and I also need to preserve event listeners.

let el = document.querySelector('#elem');

function changeElem() {
  let e=document.createElement('textarea');
  for(let i of el.attributes)
    e.setAttribute(i.name,i.value);
  
  el.replaceWith(e);
  el=e;
}

el.addEventListener('keyup', evt => {
  if(evt.code=='KeyM')alert('Key M pressed!');
})

Try to press <b>M</b> to check if event listeners are attached:
<br>
<input id="elem" type="text" value="Some value">
<br>
<button onclick="changeElem()">Click to replace</button>

When event listeners have been assigned by setting el.onkeyup it works, but with el.addEventListener() it doesn't.

Is there a way to achieve this?