爱站程序员基地<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title></head><body><body><button>开关灯</button><button>开关灯</button><button>开关灯</button><button>开关灯</button><button>开关灯</button><script>var btns = document.querySelectorAll(\'button\');/* btns.onclick = function() {this.style.backgroundColor = \'blue\';} */for (var i = 0; i < btns.length; i++) {// for循环里边只能用btns[i]不能用thisbtns[i].onclick = function() {//点击事件里边，事件触发对象和索引相关，以下只能用this，不能用 btns[i]this.style.backgroundColor = \'pink\';// btns[i].style.backgroundColor = \'pink\';}}var b = document.querySelector(\'button\');b.addEventListener(\'click\', function() {// 对比：点击事件里边，事件触发对象和索引无关，既能用this，也能用 btns[i]// b.style.backgroundColor = \'purple\';this.style.backgroundColor = \'purple\';});</script></body></body></html>
对比
<!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>* {padding: 0;margin: 0;box-sizing: border-box;}li {list-style: none;}a {text-decoration: none;}body {background-color: black;}.c-nav {position: relative;width: 900px;height: 42px;background: #fff url(images/rss.png) no-repeat right center;margin: 100px auto;border-radius: 5px;}.c-nav ul {position: absolute;/* background-color: green; */}.c-nav ul li {float: left;padding: 0 10px;/* line-height: 42px; */text-align: center;}.c-nav a {display: inline-block;height: 42px;}.c-nav a:hover {color: yellow;}.cloud {position: absolute;left: 0;top: 0;width: 83px;height: 42px;background: url(images/cloud.gif) no-repeat;}</style><script src=\'animate.js\'></script></head><body><div class=\"c-nav\"><!-- cloud绝对定位，如ul没有定位则cloud会压住ul,防止cloud压住ul，又由于ul li a都没有设置背景色所以三者都是透明的，想实现透明的ul压住cloud，ul也必须设置定位，两者都设置定位之后不指定z-index都同为auto，又ul晚于cloud生成，所以ul会成功压住cloud --><span class=\"cloud\"></span><ul><li><a href=\"javascript:;\">首页新闻</a></li><li><a href=\"javascript:;\">师资力量</a></li><li><a href=\"javascript:;\">活动策划</a></li><li><a href=\"javascript:;\">企业文化</a></li><li><a href=\"javascript:;\">招聘信息</a></li><li><a href=\"javascript:;\">公司简介</a></li><li><a href=\"javascript:;\">我是佩奇</a></li><li><a href=\"javascript:;\">啥是佩奇</a></li></ul></div><!-- <script src=\'js/animate.js\'></script> --><script>var cnav = document.querySelector(\'.c-nav\');var ul = document.querySelector(\'ul\');var cloud = document.querySelector(\'.cloud\');var lis = document.querySelectorAll(\'li\');var lifirst = document.querySelector(\'li\');lifirst.addEventListener(\'click\', function() {// this,lifirst都可lifirst.style.color = \'yellowgreen\';this.style.color = \'yellowgreen\';});for (var i = 0; i < lis.length; i++) {lis[i].addEventListener(\'mouseleave\', function() {// ？触发事件根调用者是lis[i],所以和索引有关，以下只能用this，不能用lis[i]this.style.backgroundColor = \'pink\';// lis[i].style.backgroundColor = \'pink\';});}/*for (var i = 0; i < ul.children.length; i++) {ul.children[i].addEventListener(\'mouseenter\', function() {// ？触发事件根调用者ul，根调用者不带索引（this ul.children[i]都可用），但根调用者的调用者带索引（只能用this）综上只能用thisanimate(cloud, this.offsetLeft);this.style.backgroundColor = \'purple\';});} */</script></body></html>
