事件相关
2018-09-05 本文已影响9人
盗花
1.for循环与事件的配合
初学者容易遇到的坑，将事件嵌入for循环中，实际执行时，确触发不了事件。
原示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.2.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
border: 1px solid #cccccc;
width: 360px;
height: 70px;
padding-top: 360px;
margin: 100px auto;
background: url("image/01big.jpg") no-repeat;
}
ul {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li id="li01"><img src="image/01.jpg" alt=""></li>
<li id="li02"><img src="image/02.jpg" alt=""></li>
<li id="li03"><img src="image/03.jpg" alt=""></li>
<li id="li04"><img src="image/04.jpg" alt=""></li>
<li id="li05"><img src="image/05.jpg" alt=""></li>
</ul>
</div>
<script>
'use strict';
var box = document.getElementById('box');
var ul = document.getElementsByTagName('ul')[0];
var liList = ul.getElementsByTagName('li');
for (var i = 0; i < liList.length; i++) {
var each_li = liList[i];
each_li.onmouseover = function () {
var url_li = 'url("image/0' + (i + 1) + 'big.jpg") no-repeat';
console.log(url_li);
box.style.background = url_li;
}
}
</script>
</body>
</html>
控制台的输出结果线束i已经等于5了，并且鼠标进入图片时，mouseover事件并不能触发。
修改代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.2.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
border: 1px solid #cccccc;
width: 360px;
height: 70px;
padding-top: 360px;
margin: 100px auto;
background: url("image/01big.jpg") no-repeat;
}
ul {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li id="li01"><img src="image/01.jpg" alt=""></li>
<li id="li02"><img src="image/02.jpg" alt=""></li>
<li id="li03"><img src="image/03.jpg" alt=""></li>
<li id="li04"><img src="image/04.jpg" alt=""></li>
<li id="li05"><img src="image/05.jpg" alt=""></li>
</ul>
</div>
<script>
'use strict';
var box = document.getElementById('box');
var ul = document.getElementsByTagName('ul')[0];
var liList = ul.getElementsByTagName('li');
for (var i = 0; i < liList.length; i++) {
var each_li = liList[i];
each_li.index = i; // 注意此处是重点
//下一行语句中用了this.index
each_li.onmouseover = function () {
var url_li = 'url("image/0' + (this.index + 1) + 'big.jpg") no-repeat';
console.log(url_li);
box.style.background = url_li;
}
}
</script>
</body>
</html>
注意上述代码中的each_li.index = i;和var url_li = 'url("image/0' + (this.index + 1) + 'big.jpg") no-repeat';这两句，使得for循环中i的值能够及时保留到each_li.index中，后续this.index能够直接调用。
2.querySelectorAll与getElementsByTagName
用document.querySelectorAll方法取得的元素可以使用forEach方法，用document.getElementsByTagName方法取得的元素不能使用forEach方法。(chrome中是这样)
示例：
使用document.getElementsByTagName方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.2.min.js"></script>
<style>
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<script>
'use strict';
var btns = document.getElementsByTagName('button');
btns.forEach(function (cur, index, arr) {
cur.onclick = function () {
console.log('这是第' + (index + 1) + '个按钮');
}
})
</script>
</body>
</html>
结果控制台报错
使用document.getElementsByTagName方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.2.min.js"></script>
<style>
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<script>
'use strict';
var btns = document.querySelectorAll('button');
btns.forEach(function (cur, index, arr) {
cur.onclick = function () {
console.log('这是第' + (index + 1) + '个按钮');
}
})
</script>
</body>
</html>
运行结果正常。
若要坚持使用document.getElementsByTagName方法，则可以使用闭包实现同样的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.2.min.js"></script>
<style>
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<script>
'use strict';
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
// 此处使用了闭包
(function (jj) {
btns[i].onclick = (function () {
console.log('这是第' + (jj + 1) + '个按钮');
})
})(i);
}
</script>
</body>
</html>
