Если нажатие сделано до и после
 

Ребета, подскажите нубу. Есть такая конструкция:

<div class="p-nav-inner">
<button role="button" class="owl-dot"></button>
<button role="button" class="owl-dot active"></button>
<button role="button" class="owl-dot"></button>
</div>

Оно динамическое, нужно что бы при нажатий на кнопку до owl-dot active происходило одно событие, и при нажатий после происходило другое событие!

Спасибо!

В смысле добавления на страницу? Тогда динамическое что, весь блок или его кнопки?

Класс active меняется

Ну это не динамика. Можно так, установив на каждую кнопку свой обработчик:

document.querySelector('div.p-nav-inner button:first-child').addEventListener('click', function() {
    //здесь выполнение кода для первой кнопки
})

для последней тоже самое, но заменив first-child на last-child и со своим кодом в обработчике. Можно делегировать обработку щелчков родителю p-nav-inner и в обработчике проверяя какая кнопка нажата, например по тексту кнопки, или добавить им tabindex и по нему, и т.п., выполнять соответствующее действие.

Да нет, так не пойдет. Возможно я не правильно выразился... Конечно кнопок может быть разное количество а не только 3.

При этом класс active может быть у любого элемента и только у одного из них? А что за задача с кнопками, может ее на ином условии или вообще без него решить можно?

Вот пример https://owlcarousel2.github.io/OwlCa...autowidth.html

Это слайдер, кнопки это навигация. Кнопок столько же сколько и слайдов, а класс active менятся к другим кнопкам в зависимости от активного слайда

У этого слайдера куча параметров, как методов так и событий, в которых можно узнать индексы элементов. Я наизусть не помню всего, но можно это использовать. Но вы так и не ответили зачем это нужно узнавать.

ethereal,
почитайте документацию слайдера, может все решить можно уже готовым. А узнать положение это конечно по индексу в наборе, на примере кнопок выше:

<div class="p-nav-inner">
<button role="button" class="owl-dot">before</button>
<button role="button" class="owl-dot">before</button>
<button role="button" class="owl-dot active">active</button>
<button role="button" class="owl-dot">after</button>
<button role="button" class="owl-dot">after</button>
<button role="button" class="owl-dot">after</button>
</div>

<script>
var btn = [...document.querySelectorAll('button.owl-dot')];
btn.forEach((e) => {
    e.addEventListener('click', (e) => {
        var index_act = btn.indexOf(btn.filter((e) => e.classList.contains('active'))[0]),
            index_src = btn.indexOf(e.target);
            
        if(index_src < index_act) console.log('Press button before');
        if(index_src > index_act) console.log('Press button after');
    })
});
</script>

ethereal,
:-?