将HTML DOM包含到addEventListener（）中

我正在尝试创建一个简单的拖动和调整大小系统，并且在将事件侦听器添加到分隔符时遇到问题。与其将大量的事件侦听器添加到我的HTML中，而不是将每个事件分隔器添加到类“ draggablePanel”：

<div id="content">
    <div class="draggablePanel" onmousedown='dragShift.dragStart(this,this.parentElement,event)' onmouseup='dragShift.dragEnd(this.parentElement); dragShift.dragHover(this,this.parentElement,event)' onmouseenter= 'dragShift.dragHover(this,this.parentElement,event)' onmouseleave='dragShift.dragEnd(this.parentElement),dragShift.dragLeave(this.parentElement)';>
        Content
    </div>
</div>

我正在尝试使用addEventListeners（）进行工作：

function addDragPanels(panelArrayName) {    //Add the mouse event listeners to draggable panels
    if (document.getElementsByClassName) {     //Access every divider with the "draggablePanel" class
        var divEle;
        var draggablePanels = document.getElementsByClassName(panelArrayName);
        for(var ctr=0;ctr<draggablePanels.length;ctr++){
            divEle = draggablePanels[ctr];
            divEle.addEventListener('mousedown', dragShift.dragStart(this,this.parentElement,event),false);     //How do i go about editing this?
            divEle.addEventListener('mouseup', dragShift.dragEnd( .... etc              
        }
    }
}

if (document.readyState === "complete") {
    addDragPanels("draggablePanel");
}

基本上，我使用三个参数：this，this.parentElement，event。使用addEventListener（）时，如何使用Javascript正确传递这些参数？我需要“事件”参数来跟踪拖动的Javascript函数中的鼠标位置。

在此先感谢您提供的任何帮助。抱歉，以前有人问过这个问题，但是我只是在任何地方都找不到解决方案（或者也许我不知道在哪里看什么）。