JavaScript: Listen for attribute change?

by

You need MutationObserver, Here in snippet I have used setTimeout to simulate modifying attribute

var element = document.querySelector('#test');
setTimeout(function() {
  element.setAttribute('data-text', 'whatever');
}, 5000)

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === "attributes") {
      console.log("attributes changed")
    }
  });
});

observer.observe(element, {
  attributes: true //configure it to listen to attribute changes
});
<div id="test">Dummy Text</div>

More Related Contents:

  1. window.onload vs document.onload
  2. onclick=”” vs event handler
  3. Get all Attributes from a HTML element with Javascript/jQuery
  4. How do I add a simple onClick event handler to a canvas element?
  5. When to use setAttribute vs .attribute= in JavaScript?
  6. How can I be notified when an element is added to the page?
  7. How can I capture the right-click event in JavaScript? [duplicate]
  8. How can I trigger an onchange event manually? [duplicate]
  9. Javascript event handler with parameters
  10. event.preventDefault() vs. return false (no jQuery)
  11. Handle URL fragment identifier (anchor) change event in Javascript
  12. How can I show a hidden div when a select option is selected?
  13. Need to cancel click/mouseup events when double-click event detected
  14. Why is ‘event’ available globally in Chrome but not Firefox?
  15. Defer Attribute (Chrome)
  16. How adding event handler inside a class with a class-method as the callback?
  17. Implementing jQuery’s “live” binder with native Javascript
  18. Getting the User Agent with JavaScript
  19. Fake “click” to activate an onclick method
  20. set option “selected” attribute from dynamic created option
  21. React.js Serverside rendering and Event Handlers
  22. Is event a global variable that is accessible everywhere inside the callback chain?
  23. jQuery .on(); vs JavaScript .addEventListener();
  24. submit event does not fire if submit initiated programmatically
  25. visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
  26. Detect scroll direction in React js
  27. How to click a browser button with JavaScript automatically?
  28. button onclick function firing twice
  29. jQuery .on() method doesn’t see new elements
  30. How do I pass multiple attributes into an Angular.js attribute directive?

Leave a Comment