Аналог jquery on() в javascript

document.querySelector("main").addEventListener('click', function (e) { 
  if (e.target.closest("p")) { 
    console.log("clicked " + e.target.outerHTML); 
  } 
})

main :hover { background: rgba(255, 0, 0, .25) }

<main> 
  <div>123 <span>span <em>em</em></span></div> 
  <p>456 <span>span <em>em</em></span></p> 
  <section>789 <span>span <em>em</em></span></section> 
</main>

var container = document.getElementById("container"); 
// Отслеживаем клик на родителе 
container.addEventListener("click", function(event) { 
  //   останавливаем всплытие 
  event.stopPropagation(); 
  var clicked = event.target; 
  //   Проверяем наличие нужного нам класса на элементе 
  //   по которому кликнули внутри родителя 
    if (clicked.closest(".element")) { 
    alert("Клик"); 
  } 
}); 
 
var create = document.getElementById("create"); 
 
// Создаем новые элементы по клику на кнопку 
create.addEventListener("click", function(event) { 
  var newElements = document.createElement("div"); 
  newElements.innerHTML = 
    '<div class="block"></div><div class="element element_new">клик вызовет событие</div>'; 
  container.appendChild(newElements); 
});

.container { 
  text-align: center; 
} 
 
.btn { 
  display: inline-block; 
  margin-bottom: 20px; 
} 
 
.element { 
  height: 30px; 
  background-color: orange; 
 
  line-height: 30px; 
  cursor: pointer; 
} 
 
.element_new { 
  background-color: rgb(39, 156, 145); 
} 
 
.element:hover { 
  background-color: red; 
} 
 
.block { 
    height: 30px; 
  background-color: #000; 
}

<div id="container" class="container"> 
  <button id="create" class="btn">Создать еще элементов</button> 
  <div class="element">клик вызовет событие</div> 
  <div class="block"></div> 
  <div class="element">клик вызовет событие</div> 
</div>