¿Cómo capturar el cambio de 'valor de datos' en la etiqueta? (html, js)
// caja desplegable
<button data-value="">'click'</button> <ul> <li>option1</li> <li>option2</li> </ul>Necesito 1), 2), 3)
1) click li 2) data-value="" -> data-value="1" 3) $(button).on('change?', function() {} );pero el evento de cambio admite SOLO la entrada, la etiqueta de texto no el valor de datos y el evento de clic no funciona. no cambia el valor de los datos justo después del evento 'clic'.
Entonces, ¿CÓMO obtengo el evento de cambio de 'valor de datos'?
Para detectar cambios en los atributos de los elementos, puede usar un MutationObserver
const btn = document.querySelector("button"); const observer = new MutationObserver((mutationList) => { mutationList.forEach(({ attributeName, oldValue, target, type }) => { if (type === "attributes" && attributeName === "data-value") { console.log( `${attributeName} changed from '${oldValue}' to '${target.dataset.value}'` ); } }); }); observer.observe(btn, { attributes: true, attributeOldValue: true }); // Delegated event listener at <ul> document.querySelector("ul").addEventListener("click", ({ target }) => { const li = target.closest("li"); if (li) { const option = li.dataset.option; if (option !== undefined) { btn.dataset.value = option; } } }); li { cursor: pointer; } <button data-value="">'click'</button> <ul> <li data-option="1">option1</li> <li data-option="2">option2</li> </ul>