一、addEventListener
<body>
<button id="btn">我是一个按钮</button>
<script>
window.onload = function (ev) {
var btn = document.getElementById("btn");
// btn.onclick = function (ev2) {
// // alert(0);
// window.location.href="http://www.baidu.com";
// }
btn.addEventListener('click',function (ev1) {//添加事件，第一个参数是如何触发第二个参数的事件（函数）
alert(0);
})
}
</script>
</body>
- 可以使用该函数来进行绑定事件，内含有两个参数一个用来指定动作，一个用来指定事件（函数）
二、闭包的运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D34_2_UsageOfClosures</title>
<style>
*{
margin:0;
padding:0;
vertical-align:top;
}
body{
background:url("img/background.jpg") no-repeat;
background-size:cover;
}
#box ul{
display:flex;
justify-content: space-around;
align-items:center;
cursor:pointer;
}
img{
250px;
}
li{
list-style: none;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="img/img_01.png" alt=""></li>
<li><img src="img/img_02.png" alt=""></li>
<li><img src="img/img_03.png" alt=""></li>
<li><img src="img/img_04.png" alt=""></li>
<li><img src="img/img_05.png" alt=""></li>
</ul>
</div>
<script>
window.onload = function (ev) {
//1.获取标签
var box = document.getElementById("box");
var allList = box.getElementsByTagName("li");
//2.遍历监听
for(var i=0;i<allList.length;i++){
//2.1取出单个li标签
var sLi = allList[i];
// sLi.index = i+1;//给予一个属性index
// //2.2监听点击事件
// sLi.addEventListener("click",function (ev2) {
// document.body.style.background ='url("img/img_0' + this.index + '.png") no-repeat';
// });
//也可以使用如下闭包的方式
(function (index) {
sLi.addEventListener("click",function (ev3) {
document.body.style.background ='url("img/img_0' + index + '.png") no-repeat';
});
})(i+1)
}
}
</script>
</body>
</html>
- 还可以使用闭包的方式进行循环输出
三、源码：
- D34_1_SomethingSupplyment.html
- D34_2_UsageOfClosures.html
- 地址:
https://github.com/ruigege66/JavaScript/blob/master/D34_1_SomethingSupplyment.html https://github.com/ruigege66/JavaScript/blob/masterD34_2_UsageOfClosures.html- 博客园：
https://www.cnblogs.com/ruigege0000/ - CSDN：
https://blog.csdn.net/weixin_44630050?t=1 - 欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流
