Skip to content

Commit f67c2b8

Browse files
TYRMarsTYRMars
committed
update
1 parent 250d068 commit f67c2b8

2 files changed

Lines changed: 104 additions & 0 deletions

File tree

‎Example/captrue.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title></title>
6+
</head>
7+
<style media="screen">
8+
#div1{
9+
width: 300px;
10+
height: 100px;
11+
background: red;
12+
color: #fff;
13+
text-align: center;
14+
}
15+
</style>
16+
<body>
17+
<div id="div1" >
18+
目标元素
19+
</div>
20+
<script type="text/javascript">
21+
var ev =document.getElementById('div1');
22+
window.addEventListener('click',function () {
23+
console.log("window click");
24+
},true);
25+
document.addEventListener('click',function () {
26+
console.log('document click');
27+
},true);
28+
document.documentElement.addEventListener('click',function () {
29+
console.log('html click');
30+
},true);
31+
document.body.addEventListener("click",function () {
32+
console.log('body click');
33+
},true);
34+
ev.addEventListener('click',function () {
35+
console.log('ev click');
36+
},true);
37+
window.addEventListener('click',function () {
38+
console.log("window click");
39+
});
40+
document.addEventListener('click',function () {
41+
console.log('document click');
42+
});
43+
document.documentElement.addEventListener('click',function () {
44+
console.log('html click');
45+
});
46+
document.body.addEventListener("click",function () {
47+
console.log('body click');
48+
});
49+
ev.addEventListener('click',function () {
50+
console.log('ev click');
51+
});
52+
53+
var eve = new Event('test');
54+
ev.addEventListener('test'.function () {
55+
console.log('test');
56+
});
57+
ev.dispatchEvent(eve);
58+
</script>
59+
</body>
60+
</html>

‎README.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1296,6 +1296,50 @@ bindEvent(a,'click',function(e){
12961296
* 建议对IE低版本的兼容性：了解即可，无需深究
12971297
* 如果遇到对IE低版本要求苛刻的面试，果断放弃
12981298

1299+
#### 冒泡与捕获
1300+
1301+
```html
1302+
<!DOCTYPE html>
1303+
<html>
1304+
<head>
1305+
<meta charset="utf-8">
1306+
<title></title>
1307+
</head>
1308+
<style media="screen">
1309+
#div1{
1310+
width: 300px;
1311+
height: 100px;
1312+
background: red;
1313+
color: #fff;
1314+
text-align: center;
1315+
}
1316+
</style>
1317+
<body>
1318+
<div id="div1" >
1319+
目标元素
1320+
</div>
1321+
<script type="text/javascript">
1322+
var ev =document.getElementById('div1');
1323+
window.addEventListener('click',function () {
1324+
console.log("window click");
1325+
},true);
1326+
document.addEventListener('click',function () {
1327+
console.log('document click');
1328+
},true);
1329+
document.documentElement.addEventListener('click',function () {
1330+
console.log('html click');
1331+
},true);
1332+
document.body.addEventListener("click",function () {
1333+
console.log('body click');
1334+
},true);
1335+
ev.addEventListener('click',function () {
1336+
console.log('ev click');
1337+
})
1338+
</script>
1339+
</body>
1340+
</html>
1341+
```
1342+
12991343
#### 事件冒泡
13001344

13011345
```html

0 commit comments

Comments
 (0)