webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: readme

Browse Source
This commit is contained in:
qianguyihao 2019-11-12 20:49:09 +08:00
parent 43247d22d1
commit 00cf042dd2
3 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
04-JavaScript基础/27-事件对象Event.md → 04-JavaScript基础/27-事件的绑定和事件对象Event.md
View File

@ -21,7 +21,7 @@
<script> <script>
var btn = document.getElementsByTagName("button")[0]; var btn = document.getElementsByTagName("button")[0];
//这种事件绑定的方法容易被层叠。 //这种事件绑定的方式，如果绑定多个，则后面的会覆盖掉前面的
btn.onclick = function () { btn.onclick = function () {
console.log("事件1"); console.log("事件1");
} }
@ -41,7 +41,7 @@
事件2 事件2
``` ```
我们可以看到，这种绑定事件的方式，会层叠掉之前的事件。 我们可以看到，`DOM对象.事件 = 函数`的这种绑定事件的方式：一个元素的一个事件只能绑定一个响应函数。如果绑定了多个响应函数，则后者会覆盖前者。
### DOM2的写法：addEventListener ### DOM2的写法：addEventListener
@ -54,9 +54,9 @@
参数解释： 参数解释：
- 参数1：事件名(注意，没有on) - 参数1：事件名的字符串(注意，没有on)
- 参数2：事件名(执行函数) - 参数2：回调函数：当事件触发时，该函数会被执行
- 参数3：**true表示捕获阶段触发，false表示冒泡阶段触发（默认）**。如果不写，则默认为false。【重要】 - 参数3：**true表示捕获阶段触发，false表示冒泡阶段触发（默认）**。如果不写，则默认为false。【重要】
@ -69,7 +69,7 @@
var btn = document.getElementsByTagName("button")[0]; var btn = document.getElementsByTagName("button")[0];
// addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行 // addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行
// 这种写法不会出现层叠。（更适合团队开发） // 这种写法不存在响应函数被覆盖的情况。（更适合团队开发）
btn.addEventListener("click", fn1); btn.addEventListener("click", fn1);
btn.addEventListener("click", fn2); btn.addEventListener("click", fn2);
@ -93,7 +93,14 @@
事件2 事件2
``` ```
我们可以看到，这种绑定事件的方式，不会层叠掉之前的事件。 我们可以看到，`addEventListener()`这种绑定事件的方式：
- 一个元素的一个事件，可以绑定多个响应函数。不存在响应函数被覆盖的情况。
- 事件被触发时，响应函数会按照函数的绑定顺序执行。
- `addEventListener()`不支持 IE8 及以下的浏览器。在IE8中可以使用`attachEvent`来绑定事件（这里就不详细展开了）。
## 事件对象 ## 事件对象

4
04-JavaScript基础/29-事件委托.md
View File

@ -30,7 +30,7 @@
但是，上面的做法过于消耗内存和性能。**我们希望，只绑定一次事件，即可应用到多个元素上**，即使元素是后来添加的。 但是，上面的做法过于消耗内存和性能。**我们希望，只绑定一次事件，即可应用到多个元素上**，即使元素是后来添加的。
因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 `ul` 上，然后在执行事件的时候再去匹配判断目标元素。如下： 因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 `ul` 上，然后在执行事件函数的时候再去匹配判断目标元素。如下：
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
@ -67,7 +67,7 @@
</body> </body>
``` ```
上方代码，为父节点注册click事件，当子节点被点击的时候，click事件会从子节点开始**向上冒泡**。**父节点捕获到事件**之后，开始执行方法体里的内容：通过判断 e.target 拿到了被点击的子节点li。从而可以获取到相应的信息，并作处理。 上方代码，为父节点注册 click 事件，当子节点被点击的时候，click事件会从子节点开始**向父节点冒泡**。**父节点捕获到事件**之后，开始执行方法体里的内容：通过判断 event.target 拿到了被点击的子节点`<a>`。从而可以获取到相应的信息，并作处理。
换而言之，参数为false，说明事件是在冒泡阶段触发（子元素向父元素传递事件）。而父节点注册了事件函数，子节点没有注册事件函数，此时，会在父节点中执行函数体里的代码。 换而言之，参数为false，说明事件是在冒泡阶段触发（子元素向父元素传递事件）。而父节点注册了事件函数，子节点没有注册事件函数，此时，会在父节点中执行函数体里的代码。

12
README.md
View File

@ -1,9 +1,17 @@
## 项目介绍 ## 项目介绍
- 项目地址：<https://github.com/qianguyihao/Web> 项目地址：<https://github.com/qianguyihao/Web>
前端入门和进阶学习笔记。从零开始学前端，做一名精致的前端工程师。持续更新中。本项目的主要作用有：
- 网上的大部分入门教程，都不太适合初学者，本项目争取照顾到每一位入门者的同理心。
- 帮助前端同学提供一个精品学习路线和资源，提高学习效率，少走很多弯路。
- 可以当做前端字典，随时翻阅，查漏补缺。
前端入门和进阶学习笔记。从零开始学前端，做一个web全栈工程师。持续更新中...
维护这个项目的初衷，可以看这篇文章：[《裸辞两个月，海投一个月，从Android转战Web前端的求职之路》](https://www.cnblogs.com/qianguyihao/p/8732781.html) 维护这个项目的初衷，可以看这篇文章：[《裸辞两个月，海投一个月，从Android转战Web前端的求职之路》](https://www.cnblogs.com/qianguyihao/p/8732781.html)