时间戳

首页 > 解决方案 > 输入选择器将 jquery 代码转换为 javascript 问题

javascript - 输入选择器将 jquery 代码转换为 javascript 问题

问题描述

我试图将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');
});

错误类型错误：无法读取 null 的属性“0”

标签： javascriptjqueryhtmlangularinput

解决方案

一个函数.click模拟鼠标点击元素。你需要使用.onclickhandler 有两种方法可以做到：

  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/*" />

  1. 设置 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 ( < IE 9 )，而 onclick 适用于所有浏览器。

  1. 这是处理动态添加元素上的事件的方法 - 您可以将事件侦听器绑定到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" />

推荐阅读