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

Question

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

cc *_*ung 7 javascript dom javascript-events

假设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);

Run Code Online (Sandbox Code Playgroud)

期望的射击顺序

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

Run Code Online (Sandbox Code Playgroud)

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

在表单级别的代码,formFirst,formLast和middle,但必须输入密码进不去了,inputFirst而且inputLast-虽然可以在将输入添加自己的听众.

尝试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

Ram*_*hil 5

我认为这正好回答了你的问题。请随时发表评论\联系我以获取更多信息。

- - - 编辑 - - -

好吧，我只是按照承诺的那样玩了一下，我找到了一个非常简单的解决方案：

<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>

Run Code Online (Sandbox Code Playgroud)

注意：

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

另一种方法是自己编写事件处理。这是一个例子。借鉴这篇文章。

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，5 月前
查看次数：	4614 次
最近记录：	14 年，5 月前