Основное отличие
mouseenter/mouseleave от
mouseover/mouseout заключается в том, что на на дочерних элементах нельзя поймать событие.
Именно поэтому, если нужно делегирование, то используйте
mouseover/mouseout:
<script>
document.addEventListener('DOMContentLoaded', function () {
var div = document.getElementById('div');
div.addEventListener('mouseover', function (event) {
var target = event.target;
while (target != this) {
if (target.tagName.toLowerCase() == 'p') {
alert(target.textContent);
break;
}
target = target.parentNode;
}
});
});
</script>
<div id="div">
<p>text 1</p>
<p>text 2</p>
</div>
А подписывать все дочерние элементы на события, ради
mouseenter/mouseleave это по меньшей мере глупо.
