<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>27_事件类型之鼠标事件</title>
<style>
ul,
html,
body,
li,
p,
button {
margin: 0;
padding: 0;
text-align: center;
}
ul {
width: 1000px;
margin: 150px auto;
overflow: hidden;
}
ul>li {
height: 60px;
width: 1000px;
list-style: none;
margin: 10px;
line-height: 60px;
}
button {
margin-top: 20px;
margin-right: 20px;
}
button {
float: left;
}
p {
float: left;
}
.parent {
position: relative;
box-sizing: border-box;
height: 600px;
width: 200px;
padding: 25px;
margin: 150px auto 0;
background-color: #ff6700;
color: #fff;
}
.son {
position: relative;
height: 150px;
width: 150px;
background-color: pink;
margin-bottom: 20px;
}
.son p,
.parent>p {
display: none;
position: absolute;
left: 50%;
background-color: #000;
height: 30px;
width: 30px;
z-index: 2;
}
.son p {
top: 50%;
transform: translate(-50%, -50%);
}
.parent>p {
top: -25%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<h1>鼠标事件</h1>
<div class="box">
<ul>
<li><button id="btn1">click事件</button>
<p id="p1"></p>
</li>
<li><button id="btn2">dbclick事件</button>
<p id="p2"></p>
</li>
<li><button id="btn3">mousedown事件</button>
<p id="p3"></p>
</li>
<li><button id="btn4">mouseup事件</button>
<p id="p4"></p>
</li>
<li><button id="btn5">mousemove事件</button>
<p id="p5"></p>
</li>
<li><button id="btn6">mouseenter事件</button>
<p id="p6"></p>
</li>
<li><button id="7">mouseleave事件</button>
<p id="p7"></p>
</li>
<li><button id="btn8">mouseover事件</button>
<p id="p8"></p>
</li>
<li><button id="btn9">mouseout事件</button>
<p id="p9"></p>
</li>
<li><button id="btn10">wheel事件</button>
<p id="p10"></p>
</li>
</ul>
</div>
<div class="parent">
<p id="parentP"></p>
<div class="son">
<p id="p11"></p>
</div>
<div class="son">
<p id="p12"></p>
</div>
<div class="son">
<p id="p13"></p>
</div>
</div>
<script>
var btns = document.getElementsByTagName('button');
var ps = document.getElementsByTagName("p");
btns[0].addEventListener('click', clickEvent);
function clickEvent() {
ps[0].innerHTML = '点击触发click事件';
}
btns[1].addEventListener('dblclick', dblclickEvent);
function dblclickEvent() {
ps[1].innerHTML = '双击触发dbclick事件';
}
btns[2].addEventListener('mousedown', mousedownEvent);
function mousedownEvent() {
ps[2].innerHTML = '鼠标按键按下触发mousedown事件';
}
btns[3].addEventListener('mouseup', mouseupEvent);
function mouseupEvent() {
ps[3].innerHTML = '鼠标按键抬起触发mouseup事件';
}
btns[4].addEventListener('mousemove', mousemoveEvent);
function mousemoveEvent() {
ps[4].innerHTML = '鼠标持续移动抬起触发mousemove事件';
}
btns[5].addEventListener('mouseenter', mouseenterEvent);
function mouseenterEvent() {
ps[5].innerHTML = '鼠标进入触发mouseenter事件，无冒泡现象';
}
btns[6].addEventListener('mouseleave', mouseleaveEvent);
function mouseleaveEvent() {
ps[6].innerHTML = '鼠标离开触发mouseleave事件，无冒泡现象';
}
btns[7].addEventListener('mouseover', mouseoverEvent);
function mouseoverEvent() {
ps[7].innerHTML = '进入节点触发mouseover事件，有冒泡现象';
}
btns[8].addEventListener('mouseout', mouseoutEvent);
function mouseoutEvent() {
ps[8].innerHTML = '离开节点触发mouseout事件，有冒泡现象';
}
btns[9].addEventListener('wheel', wheelEvent);
function wheelEvent() {
ps[9].innerHTML = '滚动鼠标滚轮触发wheel事件';
}
var parent = document.querySelector(".parent");
var son = document.querySelectorAll(".son");
var parentP = document.getElementById("parentP");
console.log(ps[11]);
console.log(parent);
console.log(parentP);
var str = ['mouseenter', 'mouseleave', 'mouseover', 'mouseout']
parent.addEventListener(str[0], function() {
parentP.style.display = 'block';
})
parent.addEventListener(str[1], function() {
parentP.style.display = 'none';
})
for (var i = 0; i < son.length; i++) {
son[i].addEventListener(str[0], function() {
ps[(11 + i)].setAttribute('style', 'dispaly:block;');
})
son[i].addEventListener(str[1], function() {
ps[(11 + i)].setAttribute('style', 'dispaly: none;');
})
}
/* son[0].addEventListener(str[0], function() {
ps[11].style.display = 'block';
})
son[0].addEventListener(str[1], function() {
ps[11].style.display = 'none';
})
console.log(son[0]);
son[1].addEventListener(str[0], function() {
ps[12].style.display = 'block';
})
son[1].addEventListener(str[1], function() {
ps[12].style.display = 'none';
})
son[2].addEventListener(str[0], function() {
ps[13].style.display = 'block';
})
son[2].addEventListener(str[1], function() {
ps[13].style.display = 'none';
}) */
</script>
</body>
</html>
<！-- 我的问题是，最后这部分注释的内容，我想做循环解决，但是
ps[(11+i)].style.display = 'block';这句总是报错，cant read the property of undefined
可是我在循环体里，console.log(ps[(11+i)]); 或者直接写 console.log(ps[(11+i)].style.display='block'),都可以在控制台打印出来
我想知道怎么回事
-->
老师，这个换行不对，怎么改
这个错了，应该是itba吧
老师这个为什么会报错，concat不是会把数字转换成字符串吗
老师，这个怎么计算，控制台显示138，我算的136
我这样写不会i=5啊
京公网安备 11011402011233号