Tracking attribute change using custom event

My problem is that I want to track attribute change on an element using custom event, I have been reading on mozilla developers, I still don't get it.

So, how does custom events work? and How to use it to track attribute change/variable change(of a class).


Standard event listeners respond to many things, but element attribute changes are not one of them. A MutationObserver is really the only way to build something like this yourself, short of a resource-heavy setInterval faux-listener.

var target = document.querySelector('button');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.attributeName + ' atrribute was changed.');

observer.observe(target, {
  attributes: true

Here is a JSFiddle where a button click changes an element's color, which is picked up by the MutationObserver.

Need Your Help

How to set up Windows Server 2008 r2 Network Load Balancer (NLB) Beginner

windows networking load-balancing

In work we have a set of WCF services which handle thousands upon thousands of transations a day and have decided to use windows NLB and a server farm to handle the Services traffic. We have a virt...

Making An Element Stretch Across The Entire Screen

html css navbar blogger

I would like to have my menu bar across the entire screen, currently it is in the middle with white space on either side. I would like the bar to be stretched along the top of the page but for it t...