JavaScript: getElementById - avoiding code duplication

Question

I've got the following code:

 document.getElementById(this.config.dragArea).addEventListener("dragover", 
  function(e){ e.stopPropagation(); e.preventDefault(); }, false);
 document.getElementById(this.config.dragArea).addEventListener("drop",
  this._dropFiles, false);

//SAME CODE, DIFFERENT IDs
  document.getElementById(this.config.dragAreaMobi).addEventListener("dragover", 
       function(e){ e.stopPropagation(); e.preventDefault(); }, false);
  document.getElementById(this.config.dragAreaMobi).addEventListener("drop",
       this._dropFiles, false);

If I didn't want to duplicate all this code, what could I do? Is there anyway to do something like document.getElementsById(var1, var2) ?? (NOTE: dragArea = 'id1' and dragAreaMobi = 'id2' ).

I tried using jQuery with:

 $(this.config.dragArea).bind("dragover", function(e){ e.stopPropagation(); e.preventDefault(); }, false);

This code didn't work - my best guess is the difference between bind and addEventListner ... In this instance dragArea was defined as dragArea = '#id1, #id2'

Answer 1

Create a function and pass the element to the function

function bindEventListeners(elem){
    elem.addEventListener("dragover", function(e){ e.stopPropagation(); e.preventDefault(); }, false);
    elem.addEventListener("drop", this._dropFiles, false);
}

bindEventListeners(document.getElementById(this.config.dragArea));
bindEventListeners(document.getElementById(this.config.dragAreaMobi));