Chomtana / EventX-dom-event

Allow programmer to listen for attribue and child node of DOM element event.

EventX-dom-event

• Allow programmer to listen for attribute and child node of DOM element event.
• JQuery attribute event.
• JQuery child node of DOM element event.

Table of content

• Installation
• Events
• Why we need this ???
• Examples
  • stylechange event
  • stylechange:<...> event
  • inlinestylechange event
  • inlinestylechange:<...> event
• Features
  • On
  • Off
  • Rename Event (Solve event name conflict)

Install

Browser

<script src="https://cdn.rawgit.com/Chomtana/EventX-css-event/f96312db/dist/eventx-css.js"></script>

NPM

npm install eventx-css-event

Events

Name	Description	Example
stylechange	Listen to inline and media screen style change	Click
stylechange:<...>	Listen to inline and media screen style change (Only style <...>)	Click
inlinestylechange	Listen to inline style change	Click
inlinestylechange:<...>	Listen to inline style change (Only style <...>)	Click
mediastylechange	Listen to media style change
mediastylechange:<...>	Listen to media style change (Only style <...>)

Why we need this library ???

Problem statement

I want to alert "Div Added" when div was added as a child node of #ex.

Before using this library

const target = $("#ex")[0];

var config = { childList: true };

const ob = new MutationObserver(mutationsList => {
  for (var mutation of mutationsList) {
    if (mutation.target == target && mutation.addedNodes.length > 0) {
      mutation.addedNodes.forEach(node=>{
        if (node.nodeName.toUpperCase() == "DIV") {

          alert("Div Added");        

        }
      }
    }
  }
});

var config = { attributes: true, attributeOldValue: true, attributeFilter: ["style"]};
ob.observe(target[0],config);

Note: Above example require JQuery

View and play in JSFiddle

After using this library

$("#ex").on("inlinestylechange",function(e) {

  if (e.oldStyleValue && e.newStyleValue) alert("Style "+e.styleName+" changed from "+e.oldStyleValue+" to "+e.newStyleValue);
  else if (!e.oldStyleValue && e.newStyleValue) alert("Style "+e.styleName+" added with value "+e.newStyleValue);
  else if (e.oldStyleValue && !e.newStyleValue) alert("Style "+e.styleName+" removed with old value "+e.oldStyleValue);

});

Note: Above example require JQuery

View and play in JSFiddle

Difference

• First and final block obviously shorter.
• Closer to english language.
• Remember easier.

Without JQuery

evx.on(document.getElementById("ex"),"inlinestylechange",function(e) {

  if (e.oldStyleValue && e.newStyleValue) alert("Style "+e.styleName+" changed from "+e.oldStyleValue+" to "+e.newStyleValue);
  else if (!e.oldStyleValue && e.newStyleValue) alert("Style "+e.styleName+" added with value "+e.newStyleValue);
  else if (e.oldStyleValue && !e.newStyleValue) alert("Style "+e.styleName+" removed with old value "+e.oldStyleValue);

});

Yeah, still simple and easy.

Examples

• stylechange event
• stylechange:<...> event
• inlinestylechange event
• inlinestylechange:<...> event

Features

You can find list of event name here

On

$("#ex").on("<event name>",function(e) { console.log(e,this); ... });

evx.on(<target HTMLElement>,"<event name>",function(e) { console.log(e,this); ... });

• View all JQuery coding style at http://api.jquery.com/on/
• e is a Edited MutationRecord object
• this = target element (Warning: not working if you use arrow function)
• For more information about Edited MutationRecord run console.log(e) in event handler or read here

Off

$("#ex").off("<event name>");

evx.off(<target HTMLElement>,"<event name>",[handler (Optional)])

• View all JQuery coding style at http://api.jquery.com/off/

Rename Event (Solve event name conflict)

evx.renameEvent("<event name>","<newname>")

Create new event type

Read at EventX-core

Remove event type

Read at EventX-core

Edited MutationRecord

Property Name	Type	Description
target	HTMLElement	Target element which style has been changed
styleName	String	Name of style that has been changed
oldStyleValue	String	Value of that style before changed
newStyleValue	String	Value of that style after changed
changetype	String	"inline" if inline change or "media" if media change

License

Released under the MIT License Copyright © 2018 Chomtana