Digamos que tengo un elemento del que quiero escribir el html, por ejemplo:
const tr = ...; tr.innerHTML = `<td>...</td>`;¿Hay alguna manera de escribir el html para que ya tenga un detector de eventos, o necesito usar un nuevo selector y agregarle el detector de eventos, como con:
tr.querySelector('td').addEventListeneer('click', myFunction);¿O cómo se hace esto normalmente?
Puede escribir una función que tome una cadena de plantilla como entrada:
const dom = innerString => { const holder = document.createElement("DIV"); holder.innerHTML = innerString; return holder.children; };Entonces llámalo con
const elements = dom("<tr><td>…</td></tr>");Ahora puede adjuntar un detector de eventos al primer elemento con
elements[0].children[0].addEventListener(…);Luego agregue la matriz de elementos al documento.
Puede hacerlo como sugiere, insertando el HTML y luego agregando un detector de eventos.
Alternativamente, puede usar el método de documento createElement para crear el elemento fuera del DOM, adjuntar su detector de eventos y cualquier otra propiedad y luego insertarlo como un todo.
Hay beneficios de rendimiento y seguridad al hacer esto de la segunda manera, pero depende en gran medida del caso de uso, así que siéntase libre de explorar esto más a fondo si es importante para usted.