如何基于addEventListener ass触发器将两个几乎相同的javascript函数编写成一个

我今天大部分时间都在思考这个问题。我有两种方法触发同一事件。 1.通过单击输入：文件选择器，或 2.通过将文件拖放到“dropzone”

事件之间的唯一区别是文件API使用不同的方法。 eventListeners函数调用中唯一允许的参数是（event）。我可能错过了什么，但我非常感谢你的帮助

但仅仅复制粘贴几乎相同的代码真的很烦人。有没有办法将这两个函数“fileSelect（event）和dropSelect（event）”写入一个函数

守则：

function fileSelect(event){

    event.stopPropagation();
    event.preventDefault();

    selectedFile = event.target.files[0];       //Uses ".files" from the file API in HTML5. In this case accessing info on a single file (files[0]).

    //Insert file info
    document.getElementById('filename').innerHTML = "filename: " + selectedFile.name;
    document.getElementById('filetype').innerHTML = "filetype: " + selectedFile.type;
    document.getElementById('filesize').innerHTML = "filesize: " + parseFloat(selectedFile.size/1024).toFixed(1) + " kb";
}

//parse the info from a drag'n'drop-selected image. WRITE THESE 2 FUNCTIONS INTO ONE!
function dropSelect(event){

    event.stopPropagation();
    event.preventDefault();

    selectedFile = event.dataTransfer.files[0];     //Uses ".files" from the file API in HTML5. In this case accessing info on a single file (files[0]).

    //Insert file info
    document.getElementById('filename').innerHTML = "filename: " + selectedFile.name;
    document.getElementById('filetype').innerHTML = "filetype: " + selectedFile.type;
    document.getElementById('filesize').innerHTML = "filesize: " + parseFloat(selectedFile.size/1024).toFixed(1) + " kb";
}




//add onchange event to the file_select input:file. This will run function "fileSelect", onChange. 
document.getElementById('file_select').addEventListener('change', fileSelect, false);

//start fileselect when drag'n'drop.
function handleDragOver(event){
    event.stopPropagation();
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';
}

document.getElementById('upload_box').addEventListener('dragover', handleDragOver, false);
document.getElementById('upload_box').addEventListener('drop', dropSelect, false);

---

排除通用代码：

function insertFileInfo(file) {
    //Insert file info
    document.getElementById('filename').innerHTML = "filename: " + file.name;
    document.getElementById('filetype').innerHTML = "filetype: " + file.type;
    document.getElementById('filesize').innerHTML = "filesize: " + parseFloat(file.size/1024).toFixed(1) + " kb";
}

function fileSelect(event){
    event.stopPropagation();
    event.preventDefault();
    insertFileInfo(event.target.files[0]);
}

function dropSelect(event){
    event.stopPropagation();
    event.preventDefault();
    insertFileInfo(event.dataTransfer.files[0]);
}

这可能有用 @andreas代码中的更改 selectedFile=（event.dataTransfer | | event.target）.files[0]

到

---

这是相同的方法：重构出不同的部分，并将其传递给重构函数——它是一个参数，用于获取

selectedFile

。它返回第一个部分，该部分的计算结果为

true

@Piyuesh我必须更正我的注释，或者更准确地说（我不应该在一天结束时写这些东西…^^）。如果这是truthy值，则语句返回左参数，否则返回右参数-无论其值（truthy或falsy）

function select(event){
    event.stopPropagation();
    event.preventDefault();

    selectedFile = (event.dataTransfer || event.target).files[0];

    //Insert file info
    document.getElementById('filename').innerHTML = "filename: " + selectedFile.name;
    document.getElementById('filetype').innerHTML = "filetype: " + selectedFile.type;
    document.getElementById('filesize').innerHTML = "filesize: " + parseFloat(selectedFile.size/1024).toFixed(1) + " kb";
}

selectedFile = (event.dataTransfer ? event.dataTransfer.files[0] : event.target.files[0]);