Skip to content

Commit a59cda6

Browse files
amydevyaamydevya
committed
new
1 parent 1d4efed commit a59cda6

29 files changed

Lines changed: 11811 additions & 0 deletions

‎10期JS正式课/正式课周末第五周/第一天/1.事件.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
div{
8+
width: 200px;
9+
height: 200px;
10+
background: red;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<div id="div"></div>
16+
<script>
17+
var oDiv=document.getElementById('div');
18+
oDiv.onclick=function(e){
19+
// alert(1)
20+
console.log(e)
21+
};
22+
/*oDiv.onclick=function(){
23+
alert(2)
24+
};*/
25+
function fn1(e){
26+
console.log(e)
27+
}
28+
//oDiv.addEventListener('click',fn1,false);
29+
/*oDiv.addEventListener('click',fn1,false);
30+
oDiv.addEventListener('click',function(){
31+
alert(2)
32+
},false)*/
33+
</script>
34+
</body>
35+
</html>

‎10期JS正式课/正式课周末第五周/第一天/2.事件对象.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
html,body{
8+
width:100%;
9+
height: 100%;
10+
}
11+
*{
12+
margin:0;
13+
padding:0;
14+
}
15+
div{
16+
width: 200px;
17+
height: 200px;
18+
background: red;
19+
}
20+
input{
21+
width: 300px;
22+
height: 50px;
23+
}
24+
</style>
25+
</head>
26+
<body style="height: 2000px">
27+
<div id="div"></div>
28+
<input type="text" id="txt">
29+
<script>
30+
var oDiv=document.getElementById('div');
31+
var oTxt=document.getElementById('txt');
32+
oTxt.onkeydown=function(e){
33+
e=e||window.event;
34+
//(e.keyCode<48|| e.keyCode>57) 非数字
35+
if((e.keyCode<48|| e.keyCode>57) && e.keyCode!=8){
36+
e.preventDefault? e.preventDefault(): e.returnValue=false;
37+
}
38+
//e.preventDefault();//只兼容标准浏览器；
39+
//alert(e.keyCode) //键码--兼容
40+
};
41+
/*document.body.oncontextmenu=function(e){
42+
e=e||window.event;
43+
//e.returnValue=false;//兼容IE和谷歌，但不兼容firefox
44+
e.preventDefault? e.preventDefault(): e.returnValue=false;
45+
alert(1)
46+
}*/
47+
48+
/*oDiv.onclick=function(e){
49+
e=e||window.event;//事件对象的兼容处理
50+
console.log(e)
51+
//console.log(e.type)//当前在元素身上发生的“行为”；--兼容的
52+
//e.clientX/e.clientY:当前鼠标落脚点距离“可视区”左上角的坐标位置；--兼容的
53+
}*/
54+
/*document.body.onclick=function(e){
55+
e=e||window.event;
56+
console.log(e.clientX, e.clientY)
57+
e.pageY=(document.documentElement.scrollTop||document.body.scrollTop)+ e.clientY;
58+
e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+ e.clientX;
59+
console.log(e.pageX, e.pageY)//当前鼠标落脚点距离第一屏左上角的坐标位置；
60+
}*/
61+
62+
</script>
63+
</body>
64+
</html>

‎10期JS正式课/正式课周末第五周/第一天/3.事件流.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
*{
8+
margin:0;
9+
padding:0;
10+
}
11+
div{
12+
padding:200px;
13+
font-size: 50px;
14+
color: #fff;
15+
}
16+
#div1{
17+
background: red;
18+
}
19+
#div2{
20+
background: green;
21+
}
22+
#div3{
23+
background: blue;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<div id="div1">div1
29+
<div id="div2">div2
30+
<div id="div3">div3</div>
31+
</div>
32+
</div>
33+
<script>
34+
var oDiv1=document.getElementById('div1');
35+
var oDiv2=document.getElementById('div2');
36+
var oDiv3=document.getElementById('div3');
37+
oDiv1.onclick=function(e){
38+
e=e||window.event;
39+
var target= e.target|| e.srcElement;//事件源的兼容处理
40+
alert(target.id)
41+
}
42+
/*//需求：点谁，弹谁的ID；
43+
function fn1(){
44+
alert('div1')
45+
}
46+
function fn2(e){
47+
e=e||window.event;
48+
//阻止冒泡的兼容写法
49+
e.stopPropagation? e.stopPropagation(): e.cancelBubble=true;
50+
alert('div2')
51+
}
52+
function fn3(e){
53+
e=e||window.event;
54+
//阻止冒泡的兼容写法
55+
e.stopPropagation? e.stopPropagation(): e.cancelBubble=true;
56+
alert('div3')
57+
}
58+
//useCapture:是否捕获？ false-》不捕获 true：捕获
59+
oDiv1.addEventListener('click',fn1,false);//冒
60+
oDiv2.addEventListener('click',fn2,false);//捕获
61+
oDiv3.addEventListener('click',fn3,false);*/
62+
/*oDiv1.onclick=function(){
63+
alert('div1')
64+
};
65+
oDiv2.onclick=function(){
66+
alert('div2')
67+
};
68+
oDiv3.onclick=function(){
69+
alert('div3')
70+
};*/
71+
</script>
72+
</body>
73+
</html>

‎10期JS正式课/正式课周末第五周/第一天/4.小米购物车-点击事件.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
html,body{
8+
height: 100%;
9+
}
10+
#div{
11+
width: 200px;
12+
height: 50px;
13+
background: grey;
14+
margin:50px auto;
15+
position: relative;
16+
}
17+
#mark{
18+
width: 500px;
19+
height: 400px;
20+
background: lightblue;
21+
position: absolute;
22+
top:50px;
23+
display: none;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<div id="div">
29+
<div id="mark"></div>
30+
</div>
31+
<script>
32+
var oDiv=document.getElementById('div');
33+
var oMark=document.getElementById('mark');
34+
/*要求：用事件委托来实现；
35+
* 1.点击div，mark显示，再点击div，mark隐藏；
36+
* 2.点击页面任何地方，mark都隐藏，但是，点击mark，mark不隐藏；
37+
* */
38+
//所有的一切，都用事件委托来实现，然后根据事件源做不同的区分；
39+
//把所有的点击行为，都委托给body
40+
document.body.onclick=function(e){
41+
e=e||window.event;
42+
var target= e.target|| e.srcElement;//事件源
43+
if(target.id=='div'){
44+
console.log(oMark.style.display)//获取的是行间样式，行间样式拿到的是空，因为我们把样式设置在了非行间样式；
45+
if(oMark.style.display==='block'){
46+
oMark.style.display='none';
47+
}else{
48+
oMark.style.display='block';
49+
}
50+
}
51+
if(target.id !== 'mark' && target.id !== 'div'){
52+
oMark.style.display='none';
53+
}
54+
55+
}
56+
57+
58+
59+
60+
61+
62+
63+
64+
65+
66+
67+
</script>
68+
</body>
69+
</html>

‎10期JS正式课/正式课周末第五周/第一天/4.小米购物车-鼠标移入版.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
#div{
8+
width: 200px;
9+
height: 50px;
10+
background: grey;
11+
margin:50px auto;
12+
position: relative;
13+
}
14+
#mark{
15+
width: 500px;
16+
height: 400px;
17+
background: lightblue;
18+
position: absolute;
19+
top:50px;
20+
display: none;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
<div id="div">
26+
<div id="mark"></div>
27+
</div>
28+
<script>
29+
var oDiv=document.getElementById('div');
30+
var oMark=document.getElementById('mark');
31+
oDiv.onmouseover=function(){
32+
oMark.style.display='block';
33+
console.log('ok')
34+
};
35+
oDiv.onmouseout=function(){
36+
oMark.style.display='none';
37+
}
38+
39+
40+
41+
42+
43+
44+
45+
46+
47+
48+
49+
</script>
50+
</body>
51+
</html>

0 commit comments

Comments
 (0)