Home > Developer > Web Develop
1. Get this object through native JS
```
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title></title>
<body>
<form action= "" class= "Files" >
<label class= "File" >
Select picture
<input type= "File" id= "file" name= "file" onclick= "Onfilechange (This)"/>
</label>
</form>
</body>
<script src= "Js/vue.js" ></script>
<script type= "Text/javascript" >
function Onfilechange (e) {
Console.log (e.files)////get pictures
Console.log (e.target)//Get the target object of the keyboard
Console.log (e.target.files)//Get Pictures
}
</script>
```
= = The result is:
2, native JS get mouse object
```
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title></title>
<body>
<form action= "" class= "Files" >
<label class= "File" >
Select picture
<input type= "File" id= "file" name= "file" onclick= "Onfilechange (event)"/>
</label>
</form>
</body>
<script src= "Js/vue.js" ></script>
<script type= "Text/javascript" >
function Onfilechange (e) {
Console.log (e.files)////get pictures
Console.log (e.target)//Get the target object of the keyboard
Console.log (e.target.files)//Get Pictures
}
</script>
```
= = The result is:
3. Default mouse parameters in Vue
"<form action=" class= "Files" >
<label class= "File" >
Select picture
<input type= "File" id= "file" name= "file" @click = "Onfilechange"/>
</label>
</form>
methods:{
Onfilechange (e) {
Console.log (e)
Console.log (E.files)
Console.log (E.target)
Console.log (E.target.files)
},
}
```
= = The result is:
Get this and mouse objects in native JS and the default mouse object parameters in Vue
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
