Я получаю сообщение об ошибке при наборе как функция

Question

Мой проект (в ближайшее время):

• Я делаю раздел закладок в браузере Яндекса.

---

Проблема:

• Я сделал закладку раньше.Код этого проекта:

$("#siteImg").change(function(e){
    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
        var file = e.originalEvent.srcElement.files[i];

        // image operation
        var reader = new FileReader();
        reader.onloadend = function() {
            source = String(reader.result);
        }
        console.log("asf")
        reader.readAsDataURL(file);
        }
        addBookmark();
    })   

В этом коде нет проблем.Работает правильно.Но я не хочу, чтобы программа работала, когда входные данные меняются в моем текущем проекте.Я хочу, чтобы этот код работал при нажатии кнопки.Я написал код для этого:

function imageData(e){
    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
        var file = e.originalEvent.srcElement.files[i];

        // image operation
        var reader = new FileReader();
        reader.onloadend = function() {
            source = String(reader.result);
        }
        console.log("asf")
        reader.readAsDataURL(file);
        addBookmark();
    }
}

Этот код не работает должным образом.Вероятно, причина проблемы " e ".Но я не мог понять это.Сообщение об ошибке гласит:

Посмотреть коды здесь

Answer 1

originalEvent является частью jQuery, а не javascript. В Javascript вы можете напрямую получить доступ к srcElement из события.

// jQuery
$('button').on('click', function(e) {
    console.log(e.originalEvent.srcElement);
});

// Javascript
const button = document.querySelector('button');
button.addEventListener('click', function(e) {
    console.log(e.srcElement);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>

Answer 2

Как я понимаю, вы звоните imageData() из разных мест. Например:

$("#siteImg1").change(function(e){
     /**/
}

$("#siteImg2").change(function(e){
     /**/
}

Вы можете обработать все события изменения изображения в одном месте, добавив класс siteImg и обновив свой код следующим образом:

 $(".siteImg").change(function(e){
     imageData(e);
 }

Answer 3

Иногда случается, что когда встроенный прослушиватель событий включает объект события, он не будет найден.Лучше передать ссылку на функцию из вашего JavaScript:

$("#button").onclick = imageData;