JSFiddle - React, Tailwind, and code Playground

HTML

<div>www</div>
<div>qqq</div>

CSS

div {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

JavaScript

var elem = document.body.children[0];
var elem1 = document.body.children[1];

var event = new Event('build'); //сделал кастомное событие

elem.addEventListener('build', function () { alert ('событие произошло') }, false); //подписал элемент elem на это событие

function zzz(){ //эта функция по условию вызывает мое кастомное событие в зависимости от условия
if (elem.innerHTML == 'www'){
elem.dispatchEvent(event);
}else{
alert ('нету события')
}
}


elem1.addEventListener('click', zzz)  //ну а тут я сделал событие для elem2 и как обработчик пихнул функцию которая запускает событи для elem1. событие на elem1 иницирует в обработчике своем мое кастомное событие для elem.
/*
аноны я не понимаю как вызвать кастомное событие не через запуск функции обычным способом или там как обработчик другого события. Я хочу что бы обработчик "сам реагировал" чтоли на состояние элемента.
Допустим вместо "elem1.addEventListener('click', zzz)" было бы что то типа 

"elem1.addEventListener('click', function () {elem.innerHTML = 'www}) "

тоесть сторонний код изменид innerHTML, и увидев это изменение мое кастомное событие должно среагировать.
но я хз как это сделать. Короче что то типа самовызова при наступлении события
*/