Safely Attach Event Listeners in Javascript

Code Snippet to add an handler to an event listener

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16

function commonjsAddEvent( obj, type, fn ) {     if (obj.addEventListener) {         obj.addEventListener( type, fn, false );     }     else if (obj.attachEvent) {         obj["e"+type+fn] = fn;         obj[type+fn] = function()         {             obj["e"+type+fn]( window.event );         }         obj.attachEvent( "on"+type, obj[type+fn] );     }     else {         obj["on"+type] = obj["e"+type+fn];     } }

function commonjsAddEvent( obj, type, fn ) {
    if (obj.addEventListener) {
        obj.addEventListener( type, fn, false );
    }
    else if (obj.attachEvent) {
        obj["e"+type+fn] = fn;
        obj[type+fn] = function() 
        { 
            obj["e"+type+fn]( window.event ); 
        }
        obj.attachEvent( "on"+type, obj[type+fn] );
    }
    else {
        obj["on"+type] = obj["e"+type+fn];
    }
}

And below Code Snippet to remove the handler from the event listener

?

01 02 03 04 05 06 07 08 09 10 11 12	function commonjsRemoveEvent( obj, type, fn ){     if(obj.removeEventListener){         obj.removeEventListener( type, fn, false );     }     else if(obj.detachEvent){         obj.detachEvent("on"+type, obj[type+fn]);         obj[type+fn]=null;         obj["e"+type+fn]=null;     }     else         obj["on"+type] = null; }

function commonjsRemoveEvent( obj, type, fn ){
    if(obj.removeEventListener){
        obj.removeEventListener( type, fn, false );
    }
    else if(obj.detachEvent){
        obj.detachEvent("on"+type, obj[type+fn]);
        obj[type+fn]=null;
        obj["e"+type+fn]=null;
    }
    else
        obj["on"+type] = null;
}

Get HTML Copy of the Selection

Javascript Code Snippet to get the HTML of the page selected. Usually when we select a text in HTML page, what we get is the rendered text as selection but with this code, we can get its underlying HTML.

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

// ================================================================= // ++++++++++++     Get Range Selected Nodes    start   ++++++++++++ // ++++++++++++     Courtesy to  Tim Down @tpdown       ++++++++++++ // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ function nextNode(node) {     if (node.hasChildNodes()) {         return node.firstChild;     } else {         while (node && !node.nextSibling) {             node = node.parentNode;         }         if (!node) {             return null;         }         return node.nextSibling;     } } function getRangeSelectedNodes(range) {     var node = range.startContainer;     var endNode = range.endContainer;     // Special case for a range that is contained within a single node     if (node == endNode) {         return [node];     }     // Iterate nodes until we hit the end container     var rangeNodes = [];     while (node && node != endNode) {         rangeNodes.push( node = nextNode(node) );     }     // Add partially selected nodes at the start of the range     node = range.startContainer;     while (node && node != range.commonAncestorContainer) {         rangeNodes.unshift(node);         node = node.parentNode;     }     return rangeNodes; } function getSelectedNodes() {     if (window.getSelection) {         var sel = window.getSelection();         if (!sel.isCollapsed) {             return getRangeSelectedNodes(sel.getRangeAt(0));         }     }     return []; }

// =================================================================
// ++++++++++++     Get Range Selected Nodes    start   ++++++++++++
// ++++++++++++     Courtesy to  Tim Down @tpdown       ++++++++++++
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

function nextNode(node) {
    if (node.hasChildNodes()) {
        return node.firstChild;
    } else {
        while (node && !node.nextSibling) {
            node = node.parentNode;
        }
        if (!node) {
            return null;
        }
        return node.nextSibling;
    }
}

function getRangeSelectedNodes(range) {
    var node = range.startContainer;
    var endNode = range.endContainer;

    // Special case for a range that is contained within a single node
    if (node == endNode) {
        return [node];
    }

    // Iterate nodes until we hit the end container
    var rangeNodes = [];
    while (node && node != endNode) {
        rangeNodes.push( node = nextNode(node) );
    }

    // Add partially selected nodes at the start of the range
    node = range.startContainer;
    while (node && node != range.commonAncestorContainer) {
        rangeNodes.unshift(node);
        node = node.parentNode;
    }

    return rangeNodes;
}

function getSelectedNodes() {
    if (window.getSelection) {
        var sel = window.getSelection();
        if (!sel.isCollapsed) {
            return getRangeSelectedNodes(sel.getRangeAt(0));
        }
    }
    return [];
}

Attach a copy event listener to the Body of html page and call a event handler to process the selected nodes using the getSelectedNodes().

?

1	commonjsAddEvent(document.body,'copy',handleCopyFn) ;

commonjsAddEvent(document.body,'copy',handleCopyFn) ;

Use this code snippet to safely attach and detach handlers to events.