JSFiddle - React, Tailwind, and code Playground

by Roman Zhak

HTML

<div id="svg">SVG</div>

JavaScript

var supportEventsType = {  
     'click' : true, 
     'dblclick'  : true, 
     'mousedown' : true, 
     'mouseup' : true, 
     'mouseover' : true, 
     'mouseout' : true, 
     'mousemove' : true, 
     'touchstart' : true, 
     'touchmove' : true, 
     'touchleave' : true, 
     'touchend' : true, 
     'touchcancel'  : true
}

function Events() {
    this.$$listeners = {};   
};

Events.prototype.on = function( type, handler ) {
    if( !this.$$listeners[type] ) {
           this.$$listeners[type] = [];     
    };
    
    this
     .$$listeners[type]
     .push( handler );
    // Add listener to the element
    // Check if it is supported by DOM interface
    // Otherwise it custom pub/sub
   if( type in supportEventsType ) 
    this
     .el
     .addEventListener( type, handler, false );
    
   return this;
}

Events.prototype.trigger = function( type ) {
  var l    = this.$$listeners[ type ]
    , args = [].slice.call(arguments, 1)
    if( !l ) return;
    // Run each from the stack
    for( var i = 0, len = l.length; i < len; i++ )
      l[i].apply( this.el , args );
   return this;
}

function Dom(el) {
  Events.prototype.constructor.call(this);
  this.el = document.getElementById( el );   
}

function sub() {}
         sub.prototype = Events.prototype;
         Dom.prototype = new sub;

var el = new Dom("svg");

    el.on("click", function(e){
     console.log(e);
     console.log(this); 
    });

    setTimeout(function() {
     el.trigger("click", "Fuck");
   }, 1000);