<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
<style>
.palette {
margin: 0;
padding: 0;
list-style: none;
}
.palette li {
width: 40px;
height: 40px;
border: 1px solid #000;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="palette">
<li style="background-color:crimson"></li>
<li style="background-color:bisque"></li>
<li style="background-color:blueviolet"></li>
<li style="background-color:coral"></li>
<li style="background-color:chartreuse"></li>
<li style="background-color:darkolivegreen"></li>
<li style="background-color:cyan"></li>
<li style="background-color:#194738"></li>
</ul>
<p class="color-picker"></p>
<script>
// var list = document.querySelectorAll("li");
// for (var i = i = 0, len = list.length; i < len; i++) {
// list[i].onclick = function(e) {
// var t = e.target;
// var c = t.target.style.backgroundColor;
// var p = document.getElementsByClassName("color-picker")[0]
// p.innerHTML = c;
// p.style.color = c;
// }
// }
var ulNode = document.getElementsByTagName('ul')[0];
ulNode.onclick = function (e) {
var t = e.target;
var c = t.style.backgroundColor;
var p = document.getElementsByClassName("color-picker")[0];
p.innerHTML = c;
p.style.color = c;
};
// window.onload = function () {
// var ulNode = document.getElementsByClassName("palette")[0];
// var p = document.getElementsByClassName("color-picker")[0];
// ulNode.addEventListener('click', function (e) {
// var t = e.target;
// var c = t.style.backgroundColor;
// if (t && t.nodeName.toUpperCase() == "LI") {/*判断目标事件是否为li*/
// p.innerHTML = c;
// p.style.color = c;
// }
// }, false);
// };
</script>
</body>
</html>
可以看到,匿名函数里都是一样的,只是把绑定在li标签的事件,绑在了它的父元素ul上。
坑:
把getElementsByTagName写成(vscode提示成)getElementsByName,一直在报错Uncaught TypeError: Cannot set property 'onclick' of undefined
;
网友评论