Skip to content

Commit b3ea6c2

Browse files
dashnowordsdashnowords
committed
完成了day25
1 parent 2e4c38d commit b3ea6c2

4 files changed

Lines changed: 240 additions & 0 deletions

File tree

‎25 - Event Related/README.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# 25 Event Related 中文指南
2+
3+
> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
4+
5+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 25 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
6+
7+
> 创建时间：2017-09-28
8+
最后更新：2017-09-28
9+
10+
## 挑战任务
11+
初始文档`index-start.html`提供了3个尺寸不一的`<div>`元素，本次挑战是一次学习任务，主要了解学习DOM的事件机制，包括事件捕获，事件冒泡，单次触发等。
12+
13+
## 结果展示
14+
![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/25%20-%20Event%20Related/effects.png)
15+
16+
## 相关知识
17+
[addEventListener文档](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)
18+
19+
## 过程指南
20+
1.如下设置时，当点击某个`div`时，自该`div`起以及其外层的`div`也将监听到点击事件，且点击事件只触发一次，当once参数值为false时，点击事件可多次触发。
21+
```js
22+
divs.forEach(div => div.addEventListener('click', logText, {
23+
once: true,
24+
capture: false
25+
}));
26+
```
27+
2.将`capture`参数设置为`true`后，运行程序后点击内层`div`可以看到，事件的触发顺序为由外向内，即在事件捕获阶段监听到事件。
28+
```js
29+
one.addEventListener('click', logText1, {
30+
capture: true
31+
});
32+
two.addEventListener('click', logText2, {
33+
capture: true
34+
});
35+
three.addEventListener('click', logText3, {
36+
capture: true
37+
});
38+
39+
function logText1(e) {
40+
console.log(this.classList.value);
41+
// e.stopPropagation();
42+
}
43+
44+
function logText2(e) {
45+
console.log(this.classList.value);
46+
e.stopPropagation();
47+
}
48+
49+
function logText3(e) {
50+
console.log(this.classList.value);
51+
//e.stopPropagation();
52+
}
53+
```
54+
3.在事件回调函数中调用`e.stopPropagation()`方法后，即可看到在该处监听到事件后不再继续传递事件、
55+
56+
## 延伸知识
57+
由于事件冒泡机制的存在，实际应用中常在父元素来监听众多同类子元素的点击事件，如在`<ul>`元素上监听多个`<li>`元素的点击事件，任何一个`<li>`元素被点击后，父元素都会监听到点击事件，更常用的方法是jQuery中的事件委托机制，感兴趣的小伙伴可以自行了解。
58+
59+
60+

‎25 - Event Related/effects.png‎

17.3 KB
Loading

‎25 - Event Related/index-finished-Dashrun.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Understanding JavaScript's Capture</title>
7+
</head>
8+
9+
<body class="bod">
10+
11+
<div class="one">
12+
<div class="two">
13+
<div class="three">
14+
</div>
15+
</div>
16+
</div>
17+
18+
<style>
19+
html {
20+
box-sizing: border-box;
21+
}
22+
23+
*,
24+
*:before,
25+
*:after {
26+
box-sizing: inherit;
27+
}
28+
29+
div {
30+
width: 100%;
31+
padding: 100px;
32+
}
33+
34+
.one {
35+
background: thistle;
36+
}
37+
38+
.two {
39+
background: mistyrose;
40+
}
41+
42+
.three {
43+
background: coral;
44+
}
45+
</style>
46+
47+
<script>
48+
let divs = document.querySelectorAll('div');
49+
let one = document.querySelector('.one');
50+
let two = document.querySelector('.two');
51+
let three = document.querySelector('.three');
52+
/* divs.forEach(div => div.addEventListener('click', logText, {
53+
once: false,
54+
capture: false
55+
}));*/
56+
57+
one.addEventListener('click', logText1, {
58+
capture: true
59+
});
60+
two.addEventListener('click', logText2, {
61+
capture: true
62+
});
63+
three.addEventListener('click', logText3, {
64+
capture: true
65+
});
66+
67+
68+
function logText(e) {
69+
console.log(this.classList.value);
70+
// e.stopPropagation();
71+
}
72+
73+
function logText1(e) {
74+
console.log(this.classList.value);
75+
// e.stopPropagation();
76+
}
77+
78+
function logText2(e) {
79+
console.log(this.classList.value);
80+
e.stopPropagation();
81+
}
82+
83+
function logText3(e) {
84+
console.log(this.classList.value);
85+
// e.stopPropagation();
86+
}
87+
</script>
88+
</body>
89+
90+
</html>

‎25 - Event Related/index-start.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Understanding JavaScript's Capture</title>
7+
</head>
8+
9+
<body class="bod">
10+
11+
<div class="one">
12+
<div class="two">
13+
<div class="three">
14+
</div>
15+
</div>
16+
</div>
17+
18+
<style>
19+
html {
20+
box-sizing: border-box;
21+
}
22+
23+
*,
24+
*:before,
25+
*:after {
26+
box-sizing: inherit;
27+
}
28+
29+
div {
30+
width: 100%;
31+
padding: 100px;
32+
}
33+
34+
.one {
35+
background: thistle;
36+
}
37+
38+
.two {
39+
background: mistyrose;
40+
}
41+
42+
.three {
43+
background: coral;
44+
}
45+
</style>
46+
47+
<script>
48+
let divs = document.querySelectorAll('div');
49+
let one = document.querySelector('.one');
50+
let two = document.querySelector('.two');
51+
let three = document.querySelector('.three');
52+
divs.forEach(div => div.addEventListener('click', logText, {
53+
once: true,
54+
capture: false
55+
}));
56+
57+
// one.addEventListener('click', logText1, {
58+
// // capture: true
59+
// });
60+
// two.addEventListener('click', logText2, {
61+
// // capture: true
62+
// });
63+
// three.addEventListener('click', logText3, {
64+
// capture: true
65+
// });
66+
67+
68+
function logText(e) {
69+
console.log(this.classList.value);
70+
// e.stopPropagation();
71+
}
72+
73+
function logText1(e) {
74+
console.log(this.classList.value);
75+
// e.stopPropagation();
76+
}
77+
78+
function logText2(e) {
79+
console.log(this.classList.value);
80+
// e.stopPropagation();
81+
}
82+
83+
function logText3(e) {
84+
console.log(this.classList.value);
85+
e.stopPropagation();
86+
}
87+
</script>
88+
</body>
89+
90+
</html>

0 commit comments

Comments
 (0)