Javascript 通过.on方法设置事件时，如何更改事件顺序？_Javascript_Jquery_Jquery Events

Javascript 通过.on方法设置事件时，如何更改事件顺序？

javascript jquery

Javascript 通过.on方法设置事件时，如何更改事件顺序？,javascript,jquery,jquery-events,Javascript,Jquery,Jquery Events,通过.on方法设置事件时，如何更改事件顺序结果表明，仅更改直接安装的处理程序的顺序示例：我期望得到以下结果： click # 4 = # div1 click # 3 = # div1 click # 2 = # div1 click # 1 = # div1 我需要它来反转动态创建块的事件顺序：动态块的处理程序是预先创建的 $（'body'）。在（“click”、'div2'，function（）{}）上然后创建另一个处理程序 $（'body'）。在（“click

通过

.on

方法设置事件时，如何更改事件顺序

结果表明，仅更改直接安装的处理程序的顺序
示例：
我期望得到以下结果：

click # 4 = # div1  
click # 3 = # div1  
click # 2 = # div1  
click # 1 = # div1

我需要它来反转动态创建块的事件顺序：

动态块的处理程序是预先创建的

$（'body'）。在（“click”、'div2'，function（）{}）上


然后创建另一个处理程序

$（'body'）。在（“click”、'div2'，function（）{}）上

然后创建一个块

$（“body”）.prepend（'Text div2'）

如何使第二个处理程序先于第一个处理程序运行
例如：

我需要先显示“单击#2”
示例代码：
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <style>
  #div1 {background-color:red;width:150px;height:50px;}
  #div2 {background-color:yellow;width:150px;height:50px;}
  #output {margin:15px;width:50%}
  </style>
 </head>
 <body>
<div id="div1">CLICK HERE ( div1 )</div>
<script>
$(document).ready(function() {

    var selector = '#div2';
    $('body').on("click", selector, function(){ 
        output("click #1 = " + selector);
    });

    $('body').on("click", selector, function(){ 
        output("click #2 = " + selector);
    });

    $(selector).click(function() {
        output("click #3 = " + selector);
    });
    
    $(selector).click(function() {
        output("click #4 = " + selector);
    });

    $("body").prepend('<div id="div2">CLICK HERE ( div2 )</div>');
    
    $('body').on("change load", selector, function(){ 
        output("load el with selector = " + selector); // does not work for some reason, then it will use "mouseover" event
    });
    
    $('body').one("mouseover", selector, function(){ 
        var elem = $(selector).get(0);
        var all_events = $.data(elem, 'events') || $._data(elem).events;
        if( typeof all_events !== "undefined" ){
            all_events['click'].reverse();
        }
        else {
            output("all_events is undefined");
        }
        //output( all_events['click'] );
    });

    function output(text) {
        console.log(text);
        $("#output").html(function(i, h) {
            return h + text + "<br />";
        });
    }
});

</script>
<div id="output"></div>
 </body> 
</html>


#div1{背景色：红色；宽度：150px；高度：50px；}
#div2{背景色：黄色；宽度：150px；高度：50px；}
#输出{边距：15px；宽度：50%}
单击此处（第1部分）
$（文档）.ready（函数（）{
变量选择器='#div2'；
$（'body'）。在（“单击”上，选择器，函数（）{
输出（“单击#1=“+选择器”）；
});
$（'body'）。在（“单击”上，选择器，函数（）{
输出（“单击#2=“+选择器”）；
});
$（选择器）。单击（函数（）{
输出（“单击#3=“+选择器”）；
});
$（选择器）。单击（函数（）{
输出（“单击#4=“+选择器”）；
});
$（“正文”）.prepend（'单击此处（div2）'）；
$（'body'）。在（“更改加载”上，选择器，函数（）{
输出（“load el with selector=“+selector”）；//由于某种原因不起作用，然后它将使用“mouseover”事件
});
$（'body'）.one（“鼠标悬停”，选择器，函数（）{
var elem=$（选择器）.get（0）；
var all_events=$.data（elem，'事件'）| |$._data（elem）.events；
if（所有_事件的类型！=“未定义”）{
所有_事件['click'].reverse（）；
}
否则{
输出（“所有_事件未定义”）；
}
//输出（所有_事件['单击]）；
});
函数输出（文本）{
console.log（文本）；
$（“#输出”）.html（函数（i，h）{
返回h+text+“
”；
});
}
});
错误很明显，必须获取应用.on方法的元素的事件

$（文档）.ready（函数（）{
变量选择器='#div2'；
$（'body'）。在（“单击”上，选择器，函数（）{
输出（“单击#1=“+选择器”）；
});
$（'body'）。在（“单击”上，选择器，函数（）{
输出（“单击#2=“+选择器”）；
});
$（选择器）。单击（函数（）{
输出（“单击#3=“+选择器”）；
});
$（选择器）。单击（函数（）{
输出（“单击#4=“+选择器”）；
});
$（“正文”）.prepend（'单击此处（div2）'）；
$（'body'）。在（“更改加载”上，选择器，函数（）{
输出（“使用选择器加载el=”+选择器）；
});
$（'body'）.one（“鼠标悬停”，选择器，函数（）{
var elem=$（'body'）.get（0）；
var all_events=$.data（elem，'事件'）| |$._data（elem）.events；
if（所有_事件的类型！=“未定义”）{
所有_事件['click'].reverse（）；
}
否则{
输出（“所有_事件未定义”）；
}
//输出（所有_事件['单击]）；
});
函数输出（文本）{
console.log（文本）；
$（“#输出”）.html（函数（i，h）{
返回h+text+“
”；
});
}
});
请在问题中创建一个包含所有相关代码的代码段。这是因为如果外部源已关闭或存在技术问题（JSFIDLE目前正面临这些问题），我们将无法看到该问题的演示。为什么要多次将click事件绑定到body div2？你只需要绑一次。然后可能会在函数中使用一个条件来确定要执行的操作？这是一个简化的情况。我的插件在另一个处理程序已经绑定到创建的元素后在页面上运行。但我需要首先执行我的处理程序。然后解除现有处理程序的绑定，并绑定您想要的处理程序。这是否回答了您的问题？
$(document).ready(function() {

    var selector = '#div2';
    $('body').on("click", selector, function(){ 
        output("click #1 = " + selector);
    });

    $('body').on("click", selector, function(){ 
        output("click #2 = " + selector);
    });

    $(selector).click(function() {
        output("click #3 = " + selector);
    });
    
    $(selector).click(function() {
        output("click #4 = " + selector);
    });

    $("body").prepend('<div id="div2">CLICK HERE ( div2 )</div>');
    
    $('body').on("change load", selector, function(){ 
        output("load el with selector = " + selector);
    });
    
    $('body').one("mouseover", selector, function(){ 
        var elem = $('body').get(0);
        var all_events = $.data(elem, 'events') || $._data(elem).events;
        if( typeof all_events !== "undefined" ){
            all_events['click'].reverse();
        }
        else {
            output("all_events is undefined");
        }
        //output( all_events['click'] );
    });

    function output(text) {
        console.log(text);
        $("#output").html(function(i, h) {
            return h + text + "<br />";
        });
    }
});