class の変更検知 MOで

-demo https://codepen.io/gnjo/pen/oOdOxp
-attributeだけ検知したい場合は多々ある。

let fn={}
fn.changeAttr=function(el,caller){
 let target=el
 ,ob=new MutationObserver(mu=>{ mu.map(d=>caller(d,target) )})
 ob.observe(target,{attributes: true})
 ;
 return ob;
 /*usage
let el=document.querySelector('#frame')
fn.changeAttr(el,(ev)=>{
 if(ev.attributeName==='class') //
   console.log('class change',ev.target.classList)
}) 
 */
}
;

-追記 inputのvalueは改めてsetAttributeする。 この場合valueは数字に見えても文字列。

//pug
input.x(onkeyup="this.setAttribute('value',this.value)")
input.y(type="range",onchange="this.setAttribute('value',this.value)")