使用 addEventListener 或其他方法定义在 onclick 事件上首先调用的函数

Question

我有遗留的 JS 代码，我不知道脚本中定义了什么

A.js

。它有简单的 onclick 事件和附加的函数：

$(document).ready(function () {
    //jquery onclick 
    $("#create_button").click(function (e) {
    ..... 
    }
}    
    //html
     <button class="btn btn-primary" id="create_button"
                                            name="create_button">
                                        Create New app
                                    </button>

然后，要向此按钮添加功能，我在执行此操作时定义的是加载我的第二个脚本脚本

B.js

，该脚本位于

A.js

之后：

$(window).on('load', function(){
    document.getElementById("create_button").addEventListener("click", () => {
                                      self.MyFirstFunction()
                     }, false);

}

我如何定义 self.MyFirstFunction() 将始终触发第一个？

Answer 1

您可以设置 useCapture

 的 

eventListener 标志，以赋予其高于其他

eventListeners

的最高优先级。

您的情况：

scriptB.js

$(window).on("load", function () {
    document
        .getElementById("create_button")
        .addEventListener("click", () => self.MyFirstFunction(), true);
});

演示：

let button = document.querySelector("#button")

button.addEventListener("click", () => {
  console.log("I was added first")
})

button.addEventListener("click", () => {
  console.log("I was added second")
}, true)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Demo Button</button>

Answer 2

向元素添加事件监听器时将

useCapture

设置为 true:

对于附加到事件目标的事件监听器，事件处于目标阶段，而不是捕获和冒泡阶段。 “捕获”阶段的事件监听器在任何非捕获阶段的事件监听器之前被调用。

$('#element').click(function(){
  console.log("first registered Handler in source code")
})

document.getElementById("element").addEventListener("click",function(e){
console.log("second registered Handler in source code")},true); // Notice the last argument is true 

#element{
  width:200px;
  height:100px;
  background:lightgreen;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="element"></div>