Question

After re-factoring my code as @FlorianMargaine suggested(in the JavaScript Chat conversation) , I got something that looks like the following:

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);
}

The main problem is that I think that it uses a lot of CPU on the way, how can I minimize that?
I read a bit about the ability to remove the event handlers, is that the solution? and how can I integrate that solution efficiently to the code?

Answer 1

You should not be adding an event listener for mouseup on every mousemove, nor should you be re- registering your mousemove each time you mousedown Instead:

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);
}

I’ve also added the explicit third parameter false to addEventListener as is required by some (all?) versions of Firefox.