Removing all Javascript events from a page and putting them back

I'd like to "pause" all the events of a page which means removes all the event set... and be able to put them back after.

Even the first part = removing all the events o开发者_JS百科f a page, I don't see how to do so! Do you have ideas?

I don't find anything working for it!

Edit:

Why? I want to act in a page already loaded. The user will interact with the page and I want to control the interaction... so remove all the interactions previously set.

You can use unbind() to remove all events

$.unbind();

You'd need to store all the event listeners in a eventMap.

EventMap = {

    listeners:[],
    paused:false,

    mapListener:function(eventDispacter, eventType, eventHandler) {
        listeners.push({eD:eventDispacter, eT:eventType, eH:eventHandler});

        if(!paused)
            eventDispacter.addEventListener(eventType, eventHandler);
    },

    unMapListener:function(eventDispacter, eventType, eventHandler) {
        for( var i=0; i<listeners.length; i++) {
            var listener = listeners[i];

            if(listener.eD == eventDispacter && listener.eT == eventType && listener.eH == eventHandler) {
                listeners.splice(listeners.indexOf(listener), 1);
                eventDispacter.removeEventListener(eventType, eventHandler);
            }               
        }
    },

    pauseEvents:function() {
        if(!paused) {}
            for( var i=0; i<listeners.length; i++) {
                var listener = listeners[i];
                listener.eD.removeEventHandler(listener.eT, listener.eH);
            }
        }
    },

    unPauseEvents:function() {
        if(paused) {}
            for( var i=0; i<listeners.length; i++) {
                var listener = listeners[i];
                listener.eD.addEventHandler(listener.eT, listener.eH);
            }
        }
    }
}

Add events with

<script>
    function handleClick( e ) {
        alert('Button Clicked');
    }

    EventMap.mapListener(document.getElementById('myButton'), 'click', handleClick);
</script>

Pause Events with

EventMap.pauseEvents();

Here is the currently solution I use: it doesn't solve the problem totally!

I stop the event during the capture phase: I put a listener on the document object to listen to all events in the capture phase and stop propagation.

+:

• List item
• Solves partially the problem

-:

• doesn't work for IE (no capture phase)
• if there are others events attached to the document, there are fired before my listener.

Do you have a better solution?

P.S.: I'll continue to update this post if I find a better solution

for any AJAX interactions you can certainly at least abort any connections using ajax queue and for any current animations, you can use stop();

Instead of detaching all event handlers, you can have a global boolean variable paused which would be checked in all event handlers.

var paused = false;

function handle_some_click(e) {
    if (!paused) {
        // do something
    }
}

I'm not sure why you would do this... but you could put all of your javascript into an external .js file (as you should already. Then have a single javascript function that's hardcoded into your page... it would look like this:

<script type="text/javascript" id="toggle" src="/myExternalJS.js"></script>
<script  type="text/javascript">
var hidden = false;

function toggleScripts() {
     if(hidden) {
          document.getElementById('toggle').setAttribute('src' '/none.js');
    } else {
          document.getElementById('toggle').setAttribute('src' '/myExternalJS.js');
    }
}

I think this would work... }