Pasting data, which option is faster / better?

Pasting data, which option is faster / better?

Still working within a contenteditable, and I'm manipulating data that's being pasted in.

It seems like I have two ways of doing this, and I would like your advice on which way is going to be faster or overall better... or if you have any other suggestions to make it faster or better.

Option 1, lists "beforepaste" and "paste" separately:

  1. $('#comment')

  2.       // this works for IE9, and probably earlier
  3.       .on('beforepaste', function(e) {
  4.             if (window.clipboardData) {

  5.                   // there's a hidden contenteditable on the page named "ieClipboard". This puts
  6.                   // the pasted data there, manipulates it, then copies it back to the original element.
  7.                   // This is apparently the only way to do this on IE9
  8.                   var clipboard = $('#ieClipboard');

  9.                   e.preventDefault ? e.preventDefault() : e.returnValue = false;
  10.                   clipboard.focus();

  11.                   setTimeout(function() {

  12.                         // editClip is the function where I manipulate the data
  13.                         a = editClip(clipboard.html());

  14.                         $(this).focus();

  15.                         document.selection.createRange().pasteHTML(a);

  16.                         clipboard.empty();

  17.                         return;
  18.                   }, 30);
  19.             }
  20.       })

  21.       // Chrome and FF
  22.       .on('paste', function(e) {
  23.             var clp;
  24.             if (e.originalEvent.clipboardData)
  25.                   clp = e.originalEvent.clipboardData;

  26.             if (clp) {
  27.                   e.preventDefault ? e.preventDefault() : e.returnValue = false;

  28.                   var type = 'plain';
  29.                   if (clp.types.indexOf('text/html') !== -1) type = 'html';

  30.                   a = editClip(clp.getData('text/' + type));
  31.                   document.execCommand('insertHTML', false, a);

  32.                   return;
  33.             }

  34.             // I thought I would need another condition here to not catch IE, but it doesn't appear to 
  35.             // be triggered with 'paste' anyway
  36.             else {
  37.                   a = editClip($(this).html(), 'off');
  38.                   $(this).html(a);
  39.             }
  40.       })


Option 2 puts them together:

  1. $('#comment')
  2.       .on('beforepaste paste', function(e) {
  3.             if (window.clipboardData) {
  4.                   var clipboard = $('#ieClipboard');

  5.                   e.preventDefault ? e.preventDefault() : e.returnValue = false;
  6.                   clipboard.focus();

  7.                   setTimeout(function() {
  8.                         a = editClip(clipboard.html());

  9.                         $(this).focus();

  10.                         document.selection.createRange().pasteHTML(a);

  11.                         clipboard.empty();

  12.                         return;
  13.                   }, 30);
  14.             }

  15.             else if (e.originalEvent.clipboardData) {
  16.                   var clp = e.originalEvent.clipboardData;

  17.                   if (clp) {
  18.                         e.preventDefault ? e.preventDefault() : e.returnValue = false;

  19.                         var type = 'plain';
  20.                         if (clp.types.indexOf('text/html') !== -1) type = 'html';

  21.                         a = editClip(clp.getData('text/' + type));
  22.                         document.execCommand('insertHTML', false, a);

  23.                         return;
  24.                   }
  25.             }

  26.             else {
  27.                   a = editClip($(this).html(), 'off');
  28.                   $(this).html(a);
  29.             }
  30.       })


The second option is marginally shorter, it seems a little easier to read, and it fixes the worry of the "else" condition being triggered after "beforepaste" was already processed. But I wasn't sure if it would be slower to process since I'm doubling-down on the triggers (ie, forcing a larger function that would have otherwise been skipped).

Which option do you guys think is better?

Going a little further, I have one minor nuisance... in section for IE9, it's always going to put the pasted data at the beginning of the text instead of where the cursor was positioned. Any suggestion on how to correct that?