EventListener가 마지막으로 실행되도록하는 방법은 무엇입니까?

Question

EventTarget에 마지막으로 추가 할 특정 EventListener를 싶습니다. (기본 동작 이전) 은에 등록 된 순서와 관계없이 이벤트가 취소 할 수 없다는 의미로 추가 할 수 있습니다. 이 목적을 달성하기 위해 한 번 실행되었습니다.

이벤트 리스너 내에서 .addEventListener를 사용하여 이미 시도했지만, 현재 처리 중에는 이벤트가 발생하는 다음 번에 실행될 EventListener 만 등록합니다. 불행하게도 EventListenerList는 DOM 사양의 일부가되지 않았습니다. 즉, .stopImmediatePropagation을 사용하고 마지막으로 수행 할 작업을 실행하기 전에 다른 이벤트를 수동으로 실행하는 옵션도 아닙니다.

나는 그들이 실행되는 순서를 찾고 있지 않다. 나는 최신 브라우저 엔진이 EventListeners를 등록 순서대로 실행한다는 것을 알고있다. 나는 그 행동을 우회하는 방법에 대해서만 묻는다.

콘텐츠 스크립트 (즉, 내가 추가 한 다른 EventListener (또는 그 순서)에 대한 제어권이 없음)가 사용되기 바로 전에 URL을 다시 작성하는 콘텐츠 스크립트에 대한 특정 필요성이 있습니다. 그러나 일부 페이지에는 동일한 사건 동안에 그들 자신의 재창조를해라.

현재 동작의 예 :

Answer 1

대체 모든 클릭을 처리 할 수 ​​있습니다이

function first() { console.log('first') } 
 
function second() { console.log('second') } 
 
function last(e) { if (e.target.id === 'target') console.log('last') } 
 

 
target.addEventListener("click", first); 
 
document.body.addEventListener("click", last); 
 
target.addEventListener("click", second);

<button id="target"> 
 
    Click me! 
 
</button>

다음 event.target가 처리 할 수있는 요소 인 경우 이벤트 및 확인

이벤트 버블 링으로 인해 버튼 이벤트가 상위 이벤트 전에 실행됩니다.

Answer 2

간단하지만이를 달성하기 완전히 사운드 방법은의 setTimeout에서 마지막으로 발생 할 이벤트를 래핑하는 것입니다 의미없이

// The content script: 
 
document.getElementById("target").addEventListener("click",last); 
 

 
function last() { 
 
    this.innerHTML="Correct!"; 
 
    console.log("This is supposed to occur last.") 
 
} 
 

 

 
// The webpage: 
 
document.getElementById("target").addEventListener("click",first); 
 

 
function first() { 
 
    this.innerHTML="Incorrect!"; 
 
    console.log("This is supposed to occur first.") 
 
}

<button id="target"> 
 
Click me! 
 
</button>

(). 이로 인해 실행이 지연됩니다. 물론 완전히 필요한 지연 시간을 예측할 수 없습니다 것이 가능 다른 이벤트 리스너 내에서 비동기 다른 기능이있는 경우 :

function last() { 
 
    setTimeout(() => { 
 
    this.innerHTML=("Correct!"); 
 
    console.log("This is supposed to occur last.") 
 
    }) 
 
} 
 

 

 
// The webpage: 
 

 
document.getElementById("target").addEventListener("click",last); 
 
document.getElementById("target").addEventListener("click",first); 
 

 

 

 
function first() { 
 
    this.innerHTML="Incorrect!"; 
 
    console.log("This is supposed to occur first.") 
 
}

<button id="target"> 
 
Click me! 
 
</button>