Skip to content

Instantly share code, notes, and snippets.

@scottschiller

scottschiller/normalized-addremove.html

Created September 26, 2010 18:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save scottschiller/598208 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save scottschiller/598208 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. scottschiller revised this gist Jul 10, 2011. No changes.
  2. scottschiller revised this gist Nov 26, 2010. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions normalized-addremove.html
    View file
    Original file line number Diff line number Diff line change
    @@ -41,11 +41,12 @@
    }

    function apply(args, sType) {
    var oFunc = args.shift()[evt[sType]];
    var element = args.shift(),
    method = [evt[sType]];
    if (old) {
    oFunc(args[0], args[1]);
    element[method](args[0], args[1]);
    } else {
    oFunc.apply(this, args);
    element[method].apply(element, args);
    }
    }

  3. scottschiller revised this gist Sep 26, 2010. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions normalized-addremove.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,14 +21,14 @@
    * add/remove arguments must be identical to work.
    */

    var old = (window.attachEvent),
    var old = (window.attachEvent), slice = Array.prototype.slice;
    evt = {
    add: (old?'attachEvent':'addEventListener'),
    remove: (old?'detachEvent':'removeEventListener')
    };

    function getArgs(oArgs) {
    var args = Array.prototype.slice.call(oArgs), len = args.length;
    var args = slice.call(oArgs), len = args.length;
    if (old) {
    args[1] = 'on' + args[1]; // prefix
    if (len > 3) {
  4. scottschiller revised this gist Sep 26, 2010. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion normalized-addremove.html
    View file
    Original file line number Diff line number Diff line change
    @@ -15,9 +15,10 @@
    * addEvent(object, eventName, eventHandler, capture*)
    * example: addEvent(window, 'load', didLoad);
    *
    * removeEvent(object, eventName, eventHandler)
    * removeEvent(object, eventName, eventHandler, capture*)
    * example: removeEvent(window, 'load', didLoad);
    *
    * add/remove arguments must be identical to work.
    */

    var old = (window.attachEvent),
  5. scottschiller renamed this gist Sep 26, 2010. 1 changed file with 0 additions and 0 deletions.
    0 normalized-addremove.js → normalized-addremove.html
    View file
    File renamed without changes.
  6. scottschiller created this gist Sep 26, 2010.
    117 changes: 117 additions & 0 deletions normalized-addremove.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,117 @@
    <html>
    <head>
    <title>Somewhat-normalized event add/remove</title>
    <script>
    var addEvent, removeEvent;

    (function() {

    /*
    * Somewhat-normalized event add/remove (old IE/W3C)
    * --------------------------------------------------
    * W3-style arguments, optional capture
    * (default capture param if omitted: false, bubbling)
    *
    * addEvent(object, eventName, eventHandler, capture*)
    * example: addEvent(window, 'load', didLoad);
    *
    * removeEvent(object, eventName, eventHandler)
    * example: removeEvent(window, 'load', didLoad);
    *
    */

    var old = (window.attachEvent),
    evt = {
    add: (old?'attachEvent':'addEventListener'),
    remove: (old?'detachEvent':'removeEventListener')
    };

    function getArgs(oArgs) {
    var args = Array.prototype.slice.call(oArgs), len = args.length;
    if (old) {
    args[1] = 'on' + args[1]; // prefix
    if (len > 3) {
    args.pop(); // no capture
    }
    } else if (len === 3) {
    args.push(false);
    }
    return args;
    }

    function apply(args, sType) {
    var oFunc = args.shift()[evt[sType]];
    if (old) {
    oFunc(args[0], args[1]);
    } else {
    oFunc.apply(this, args);
    }
    }

    addEvent = function() {
    apply(getArgs(arguments), 'add');
    };

    removeEvent = function() {
    apply(getArgs(arguments), 'remove');
    };

    }());

    // ******************************************************************
    // * now, assign some example handlers and trigger a bunch of stuff *
    // ******************************************************************

    var isDown = false;
    var counter = 0;
    var obj = null;

    // each mouse down/up will add and remove its opposite event.

    function down() {
    isDown = true;
    document.getElementById('mouse').innerHTML = (counter++);
    addEvent(obj, 'mouseup', up); // watch for release
    removeEvent(obj, 'mousedown', down, true);
    }

    function up() {
    isDown = false;
    document.getElementById('mouse').innerHTML = (counter++);
    addEvent(obj, 'mousedown', down, true); // capture, too
    removeEvent(obj, 'mouseup', up);
    }

    function didLoad() {
    obj = (navigator.userAgent.match(/msie/i)?document:window); // IE doesn't like attaching onmousedown/up to window, Safari doesn't like document - and/or I'm simply doing it wrong somehow. :D
    if (typeof console != 'undefined' && typeof console.log != 'undefined') {
    console.log('window load fired.');
    }
    up(); // watch for first mousedown() event
    }

    function cleanup() {
    removeEvent(window, 'load', didLoad);
    removeEvent(window, 'unload', cleanup);
    if (isDown) {
    removeEvent(obj, 'mouseup', up);
    } else {
    removeEvent(obj, 'mousedown', down, true);
    }
    if (typeof console != 'undefined' && typeof console.log != 'undefined') {
    console.log('window unload: events removed');
    }
    }

    addEvent(window, 'load', didLoad); // lazy/convenient: no bubble param, default = false
    addEvent(window, 'unload', cleanup);
    </script>
    </head>
    <body>

    <div>
    <p>Mousedown/mouseup events: <span id="mouse">0</span></p>
    </div>

    </body>
    </html>