JSFiddle - React, Tailwind, and code Playground

by kon_yu

HTML

<!DOCTYPE html>
<html>
<body>

<div id="demo">This is parent.日本語が書いてある辺りカタカナのカナ
  <button id="myBtn">Child button</button>
  タグを挟んだ後のカタカナ
  <div id="result"></div>
</div>
<p>
親のNodeのThisをThatに書き換えても、子供のbuttonに紐付いているイベントリスナーが途切れないようにしたい
</p>

<script src='https://cdn.jsdelivr.net/gh/colxi/getEventListeners/src/getEventListeners.min.js'></script>
</body>
</html>

JavaScript

document.getElementById("myBtn").addEventListener("click", function() {
  myFunction();
});

function myFunction() {
  document.getElementById("result").innerHTML = "ボタンを押したよ";
}

document.getElementById("myBtn").addEventListener("mouseup", ()=> {alert("アラートだよ")});


const listAllEventListeners = () => {
  let elements = [];
  const allElements = document.querySelectorAll('*');
  for (let i = 0; i < allElements.length; i++) {
      const currentElement = allElements[i];
      const events = currentElement.getEventListeners()

      if(Object.keys(events).length !== 0 ){
        elements.push({
          "node": currentElement,
          "events": events
        })
      }
    }
  return elements
};

const makeSelector = (node) => {
  let id = node.id
  if(id !== ""){ id = "#" + id }
  let classNames = ""
  node.classList.forEach((className)=>{ classNames += "." +className})
  return node.tagName + id + classNames
}

const replaceKatakana = (body) => {
	body.innerHTML = demo.innerHTML.replace("This", "THAT")
}

const eventList = listAllEventListeners();

// ダミー置き換え処理
const body = document.querySelector('body')
replaceKatakana(body)

// セレクタを作ってイベントを付け替え、ただし同じセレクタがかぶってる場合はイベントが複数付与される
eventList.forEach((e) => {
  const selector = makeSelector(e.node)
  Object.keys(e.events).forEach((key) => {
    console.log(key)
    const aKindOfEvents = e.events[key]
    aKindOfEvents.forEach((e0) =>{
      new_elements = document.querySelectorAll(selector)
      new_elements.forEach((ne) => {
        ne.addEventListener(e0.type, e0.listener)
      })
    })
  })
  console.log(listAllEventListeners());
})