有关 CPU 消耗的 JavaScript 命名函数和事件处理程序

Question

按照 @FlorianMargaine 建议(在 JavaScript 聊天对话中)重构我的代码后，我得到了如下所示的内容:

body.addEventListener( 'mousedown', action1);
function action1(){
    //Start selecting event
    body.addEventListener( 'mousemove', selectOver);
}
function selectOver(e){
    //after the user has selected and done a mouse up event show a box:
    body.addEventListener( 'mouseup', showBox );
}
function showBox(e){
    //Show box
    box.addEventListener( 'click', actionAlert('clicked on interface after selected text') );
}
function actionAlert(d){
    alert(d);
}

主要问题是我认为它在途中使用了大量的CPU，我怎样才能最大限度地减少它？ 我读了一些有关删除事件处理程序的能力的内容，这是解决方案吗？以及如何将该解决方案有效地集成到代码中？

Answer 1

(编辑使用“addEventListener”时这是不正确的，但我将其留在这里作为历史好奇心:)“action1”事件处理程序每​​次都会重新绑定(bind)“mousemove”处理程序叫。反过来，该处理程序为“mouseup”绑定(bind)一个新的处理程序。过了一会儿，就会出现成百上千的冗余处理程序。

因此，教训是:不要在其他事件处理程序中绑定(bind)事件处理程序(除非您确实有充分的理由)。 (编辑 - 抱歉；正如我在上面所写的，有人指出这都是不正确的。我习惯于使用 jQuery 绑定(bind)处理程序，而该库的行为方式并不相同。)

另外:正如所写，您的“showBox”函数绑定(bind)了调用“actionAlert”方法的结果，该方法没有返回值。我想你想要的是:

box.addEventListener( 'click', function() {
  actionAlert('clicked on interface after selected text');
});