0

在按照@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，我怎样才能最大限度地减少它？我读了一些关于删除事件处理程序的能力，这是解决方案吗？以及如何将该解决方案有效地集成到代码中？

4

2 回答 2

3

（在使用“addEventListener”时编辑这是不正确的，但我将把它留在这里作为历史的好奇：）你的“action1”事件处理程序每​​次调用它时都会重新绑定“mousemove”处理程序。反过来，该处理程序为“mouseup”绑定一个新的处理程序。过了一会儿，就会有成百上千的冗余处理程序。

所以，教训是：不要在其他事件处理程序中绑定事件处理程序（除非你真的有充分的理由）。（编辑——抱歉；正如我在上面所写的，有人指出这都是不正确的。我习惯于使用 jQuery 绑定处理程序，并且该库的行为方式不同。）

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

box.addEventListener( 'click', function() {
  actionAlert('clicked on interface after selected text');
});
于 2012-06-11T15:44:14.250 回答
2

mouseup您不应该为每个添加事件侦听器mousemove，也不应该在每次 mousedown 时重新注册 mousemove 而是：

body.addEventListener( 'mousedown', action1, false);
function action1(){
    //Start selecting event
    body.addEventListener( 'mousemove', selectOver, false);
    body.addEventListener( 'mouseup', showBox, false );
    body.addEventListener( 'mouseup', function(){
      body.removeEventListener( 'mousemove', selectOver, false );
    });
}
function selectOver(e){
    // Not sure what this function is for.
}
function actionAlert(d){
    alert(d);
}

我还添加了显式的第三个参数asfalse是addEventListener某些（所有？）版本的 Firefox 所要求的。

于 2012-06-11T15:44:42.917 回答