javascript - 关于querySelectorAll的问题
本文介绍了javascript - 关于querySelectorAll的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<body>
<?php require_once '../php/header.php'; ?>
<div class="wrap" id="updata">
<input id="file" type="file" multiple="multiple"/>
<div class="float" v-if="float"> {{ more }} </div>
<div class="list">
<div class="tips" v-if="tips" v-on:click="selected">Please click <span>Add File</span> To Add The File</div>
<div class="progress">
<div class="quan">
<span></span>
<p class="text" id="progress"></p>
</div>
</div>
<ul class="file-list">
<li v-for=" ( l , index ) in list ">
<div class="element num" v-text=" getSerial(index) "></div>
<div class="element name" v-text=" getName(l.name) "></div>
<div class="element size" v-text=" getSize(l.size) "></div>
<div class="element type" v-text=" getType(l.name) "></div>
<div class="element del">Del</div>
<div class="element done">Done</div>
</li>
</ul>
</div>
<footer>
<div class="button">
<button class="add" v-on:click="selected">Add File</button>
<button class="del">Delete</button>
<button class="upload" v-on:click="upload">Done</button>
</div>
</footer>
</div>
</body>
document.querySelector('#file').addEventListener('change',function () {
updata.tips = false;
var file = document.querySelector('#file');
updata.list = file.files;
console.log('已选择'+updata.list.length+'个文件');
var element = document.querySelectorAll('.element');
for ( var i=0;i<element.length;i++ ){
element[i].addEventListener('mouseover',function (e) {
updata.more = e.toElement.innerText;
updata.float = true;
})
element[i].addEventListener('mousemove',function (e) {
var x = Math.floor ( document.querySelector('.wrap').offsetLeft );
var y = Math.floor ( document.querySelector('.wrap').offsetTop );
x = e.pageX - x * 0.7 + 'px';
y = e.pageY - y * 0.8 + 'px';
document.querySelector('.float').style.transform = "translate("+ x +","+ y +")";
})
element[i].addEventListener('mouseout',function (e) {
updata.float = false;
updata.more = '';
})
}
if( file.files.length == 0 ){
updata.tips = true;
}
});如上代码，我不能成功地添加addEventListener事件
解决方案
- lz指的不能成功添加
addEventListener事件指的是哪个，是element还是file？ - 顺便把html也贴一下吧。。
补充：最小demo
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
.element {
width:200px;
height: 200px;
}
</style>
<input id="file" type="file">
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
<script>
document.querySelector('#file').addEventListener('change',function () {
var file = document.querySelector('#file');
var element = document.querySelectorAll('.element');
for ( var i=0;i<element.length;i++ ){
element[i].addEventListener('mouseover',function (e) {
console.log("over")
})
element[i].addEventListener('mousemove',function (e) {
console.log("move")
})
element[i].addEventListener('mouseout',function (e) {
console.log("out")
})
}
});
</script>
</body>
</html>以上，可以在chrome下运行。此外，这里和闭包没有任何关系~~
补充2：事件代理简单demo
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
li {
width:200px;
height: 200px;
}
</style>
<input id="file" type="file">
<ul id="file-list">
</ul>
<script>
document.querySelector('#file').addEventListener('change',function () {
var list = document.querySelector('#file-list');
list.addEventListener('mouseover',function (e) {
if (e.target.className) {
}
})
list.addEventListener('mousemove',function (e) {
if (e.target.className) {
}
})
list.addEventListener('mouseout',function (e) {
if (e.target.className) {
}
})
var li = document.createElement("li");
li.className = 'element'
list.append(li)
});
</script>
</body>
</html>通过event.target获得触发事件的元素，并通过其className或是其他属性判断其是否需要处理。
这篇关于javascript - 关于querySelectorAll的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
