JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Привет, всем зрителям LoftBlog !</h1>
		<button data-color="day" id="day">День</button>
		<button data-color="night" id="night">Ночь</button> 
		<a data-color="hello-dos" href="http://www.yandex.ru">Привет DOS!</a>

CSS

#box {
			width: 100px;
			height: 100px;
			background: green;
		}  
 
		.night {
			color: white;
			background-color: black;
		}
 
		.day {
			color: black;
			background-color: white;
		}
 
		.hello-dos {
			color: white;
			background-color: blue;
		}

JavaScript

Element.prototype.addEvent = function(elem, evType, fn) { 
   var me = this;
    if (elem.addEventListener) { 
        elem.addEventListener(evType, function(e){ 
         if( e.target == me && typeof fn == "function"){
            fn.call(me,e)
         }
       }); 
    } 
}

 
 var changeColor = function (e) {  
 	  e.preventDefault();
  	var elem  = this,
 		colorData = elem.getAttribute('data-color'); 
    console.log(this);
    
 	if ( colorData ) { 
 		if (e.type === 'click') {
 			document.body.className = ''; 
 		} else if (e.type === 'mouseover') { 
 			document.body.className = colorData;
 		}
 	}	 
 }; 
 (function(){
  var eventsObj = document.querySelector("#day");
  eventsObj.addEvent(document, 'click', changeColor );
  eventsObj.addEvent(document, 'mouseover', changeColor );
  
      eventsObj = document.querySelector("#night");
  eventsObj.addEvent(document, 'click', changeColor );
  eventsObj.addEvent(document, 'mouseover', changeColor );
 })()