What you can do is assign the listener of the second event only when the first event occurs; and, when executed, remove the listener, so that it is added again in the execution of the first event. The logic would be similar to this:
function eventoX(event) {
// ...
document.removeEventListener('X', eventoX);
}
document.addEventListener('Y', event => {
// ...
document.addEventListener('X', eventoX);
});
For example, considering that both events are button clicks, we will make the B button click event occur only if the A button has already been pressed:
const A = document.getElementById('a');
const B = document.getElementById('b');
function eventoEmB(event) {
console.log('Você pressionou o botão B');
B.removeEventListener('click', eventoEmB);
}
A.addEventListener('click', event => {
console.log('Você pressionou o botão A');
B.addEventListener('click', eventoEmB);
});
<button id="a">Botão A</button>
<button id="b">Botão B</button>
Note that the event in B will only be triggered if the event in A has been fired earlier, just once.
For more assertiveness in the answer I could mention what would be the names of these events X and Y?
– Jonas Centenaro
Well, my question is a scroll event on a web page, when the scroll reaches that value, it will make an animation on a logo, and when the value of the scroll goes back to the previous one it will make another animation, but the second animation can only occur if the first one has already been executed before, and just after the second if the value of the scroll changes again you can make the animations A or B only if the previous one is the opposite!
– Arthur74