javascript addEventListener 注册之前的更改

Question

我正在构建一个文件上传模式。第一次尝试时工作正常，第二次尝试时它上传图像两次，第三次尝试时上传三次，依此类推。这可能是一些基本的东西，但我不知道如何防止这种情况。

基本上导致我的问题的是事件监听器的行为:

document.getElementById('upfile').addEventListener('change', askForTags, false);

测试用例在这里:http://jsfiddle.net/mMJes/2/

警报将在第一次上传时显示一次，然后显示两次，依此类推。如何停止这种行为？

完整代码:

document.getElementById('upfile').addEventListener('change', askForTags, false);

function askForTags(evt) {

    $('.add-tags-section').show();

    $("#submit-tags").click(function () {
        tags = $('#add-tags-input').val();
        $('.add-tags-section').hide();
        handleFileSelect(evt);
    });
}

function handleFileSelect(evt) {
    alert('here');
}

Answer 1

每次调用 askForTags 时，您都会绑定(bind)另一个相同的 click 事件处理程序。只需绑定(bind)一个点击处理程序，它就可以工作。

演示: http://jsfiddle.net/FvpUe/

document.getElementById('upfile').addEventListener('change', askForTags, false);

function askForTags(evt) {
    $('.add-tags-section').show();
}

$("#submit-tags").click(function () {
    tags = $('#add-tags-input').val();
    $('.add-tags-section').hide();
    handleFileSelect(evt);
});

function handleFileSelect(evt) {
    alert('here');
}