Селектор ввода конвертировать код JQuery в вопрос JavaScript - PullRequest
Новая
       17

Селектор ввода конвертировать код JQuery в вопрос JavaScript

0 голосов
/ 18 июня 2019

Я пытался преобразовать код jquery в javascript, но я не могу понять, как написать этот код в javascript

Код JQuery 

$('<input type="file" accept="image/*" />')

я хочу преобразовать этот код в javascript

пробный код 

var uploader = document.querySelector('input[type="file"]');

и после этого события щелчка при пожаре uploader, но не могу работать

нажмите код функции 

uploader[0].click(function(){
   console.log('test');
});
uploader.click(function(){
   console.log('test');
});

ОШИБКА TypeError: Невозможно прочитать свойство '0' с нулевым значением

1 Ответ

0 голосов
/ 18 июня 2019

Функция .click имитирует щелчок мыши по элементу.Вам необходимо использовать обработчик .onclick. Есть два способа сделать это:

  1. Установить свойство onclick элемента uploader.onclick = function()...

var uploader = document.querySelector('input[type="file"]');

uploader.onclick = function(e){
  console.log('Hello!', e.target);
};
<input type="file" accept="image/*" />
Установить обработчик для события onclick uploader.addEventListener('click', fucntion()... 

var uploader = document.querySelector('input[type="file"]');

uploader.addEventListener('click', function(e){
  console.log('Hello!', e.target);
});
<input type="file" accept="image/*" />

addEventListener не перезаписывает существующие обработчики событий для элементов, тогда как onclick переопределяет любые существующие обработчики событий onclick = function.

addEventListener не работает вболее старые версии Internet Explorer (> IE 9), которые вместо этого используют attachEvent (

Вот способ обработки событий на динамически добавленных элементах - вы можете привязать прослушиватель событий к body и проверить элемент, по которому щелкнули, на соответствие критериям.

Таким образом, прослушиватель событий неНе перекрываются другие обработчики, связанные с телом. 

document.body.addEventListener('click', function(e){
  if (e.target.tagName == 'INPUT' && e.target.type == 'file') {
    var newElement = document.createElement('INPUT');
    newElement.type = 'file';
    document.body.appendChild(newElement);
    console.log('Hello!', e.target);
  }
});
<input type="file" accept="image/*" class="field" />
...