Question

假设FORM包含INPUT，请使用以下侦听器：

的javascript

function formFirst(e) { ... }
function formLast(e) { ... }
function inputFirst(e) { ... }
function inputLast(e) { ... }
function middle(e) { ... }

document.getElementById('form').addEventListener('change',formFirst,true);
document.getElementById('form').addEventListener('change',formLast,false);
document.getElementById('input').addEventListener('change',inputFirst,true);
document.getElementById('input').addEventListener('change',inputLast,false);

期望的烧制顺序

formFirst()   // normal - outer element, useCapture = true
inputFirst()  // normal - triggering element, declared first
middle()      // -- how to do this?
inputLast()   // normal - triggering element, declared second
formLast()    // normal - outer element, useCapture = false

问题和尝试解决方案的性质

拥有FORM级别的代码，formFirst，formLast和middle，但无法访问INPUT代码inputFirst和inputLast - 尽管可以添加在INPUT上拥有自己的听众。

尝试1 修改formFirst()以创建和发送一个新的change Event（在formFirst中会被忽略），它会调用inputFirst()，但是没有办法阻止传播，以防止随后调用inputLast()。

尝试2 添加middle作为侦听器添加到INPUT，但不能保证两个相同类型和相同useCapture的侦听器的触发顺序。

尝试2的前提不正确 - 解雇顺序由目标元素中的声明顺序决定。

以下是规则

非目标元素触发useCapture=false，从最外层元素开始，朝向目标元素

a）如果同一元素有多个useCapture=true触发器，则声明顺序。
在目标元素，声明顺序，，无论useCapture
非目标元素触发useCapture=false，从最里面的元素开始，远离目标元素

a）如果同一元素有多个useCapture=false触发器，则声明顺序。

Answer 1

我认为this只回答你的问题。随时发表评论\联系我获取更多信息。

-----编辑------

好的，我只是按照承诺玩了一点，我发现了一个非常简单的解决方案：

<script type="text/javascript">
function formFirst(e) { alert(1); }
function formLast(e) { alert(5); }
function inputFirst(e) { alert(2); }
function inputLast(e) { alert(4); }
function middle(e) { alert(3); }

function init(){
    document.getElementById('form').addEventListener('change',formFirst,true);
    document.getElementById('form').addEventListener('change',formLast,false);
    document.getElementById('input').addEventListener('change',inputFirst,true);
    document.getElementById('input').addEventListener('change',middle,true);
      /*** alternative to last tow lines  
    document.getElementById('input').addEventListener('change',function(){inputFirst();middle();},true);
         **/
    document.getElementById('input').addEventListener('change',inputLast,false);
}

</script>
<body onload="init();">
<form id="form">
<input type="text" id="input" /> <br />
</form>
</body>

通知：

我将addEventListener部分放入init函数中，所以我可以在加载页面后调用它并且元素已经存在。
我只是在chrome上运行它。所以我不想保证你有关其他浏览器的事情。

另一种方法是自己编写事件处理。这是一个例子。转发this文章。

<script type="text/javascript">

function formFirst(e) { alert(1); }
function formLast(e) { alert(5); }
function inputFirst(e) { alert(2); }
function inputLast(e) { alert(4); }
function middle(e) { alert(3); }

function init(){

  //create event
  myHandler = new Event();

  //add handler
  myHandler.addHandler(formFirst);
  myHandler.addHandler(inputFirst);
  myHandler.addHandler(middle);
  myHandler.addHandler(inputLast);
  myHandler.addHandler(formLast);

  //regiser one listener on some object
  document.getElementById('input').addEventListener('change',function(){myHandler.execute();},true);
}


function Event(){
  this.eventHandlers = new Array();
}

Event.prototype.addHandler = function(eventHandler){
  this.eventHandlers.push(eventHandler);
}

Event.prototype.execute = function(){
  for(var i = 0; i < this.eventHandlers.length; i++){
    this.eventHandlers[i]();
  }
}


</script>
<body onload="init();">
<form id="form">
<input type="text" id="input" /> <br />
</form>
</body>

在javascript中，手动控制事件监听器的顺序

的javascript

期望的烧制顺序

问题和尝试解决方案的性质

以下是规则

1 个答案: