<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 100px;height: 100px;background-color: red;};
</style>
<script>
window.onload = function(){
var Div = document.getElementsByTagName("div");
var i = 0;
Div.onmousemove = function(){
this.innerHTML = i++;
}
}
</script>
</head>
<body>
<div id="sss"></div>
</body>
</html>我想要产生一个效果：鼠标在移动的时候i的值不断在增加i的值；
问题1：为什么我想得到div的值不能用getElementsByTagName？
问题2：当我把var i = 0 放在点击事件函数内部为什么就不能改变i的值？像下面的代码，如果我把它放在内部函数执行的过程是什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 100px;height: 100px;background-color: red;};
</style>
<script>
window.onload = function(){
var Div = document.getElementsByTagName("div");
Div.onmousemove = function(){
var i = 0;
this.innerHTML = i++;
}
}
</script>
</head>
<body>
<div id="sss"></div>
</body>
</html>
getElementsByTagName返回dom数组，数组没有事件，要遍历里面的dom对象来添加事件
window.onload = function () {
var Div = document.getElementsByTagName("div");
var i = 0;
for (var j = 0; j < Div.length; j++)
Div[j].onmousemove = function () {
this.innerHTML = i++;
}
}
i放函数体里面每次触发事件都会执行函数体定义一个新的i变量赋值为0，当然不会变。
就和定义一个函数，每次执行时（就和事件每次触发一样执行函数）内部定义的变量只在函数体内有效，为定义时的值，不会影响到外部的变量。