From 6c0c47a6169c6b9fd34a1b7b1195e049e7073f86 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Tue, 12 Nov 2019 15:23:22 +0800 Subject: [PATCH] =?UTF-8?q?update:=20=E4=BA=8B=E4=BB=B6=E5=AF=B9=E8=B1=A1?= =?UTF-8?q?=20Event?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../23-通过style对象设置行内样式.md | 502 ----------- 04-JavaScript基础/27-事件对象Event.md | 505 +++++++++++ 04-JavaScript基础/28-事件的冒泡.md | 288 ++++++ 04-JavaScript基础/31-事件对象Event和冒泡.md | 829 ------------------ ...法和内置对象.md => BOM的常见内置方法和内置对象.md} | 0 .../{52-JS的小知识.md => JS的小知识.md} | 0 04-JavaScript基础/{33-原型链.md => 原型链.md} | 0 .../{51-常见代码解读.md => 常见代码解读.md} | 0 8 files changed, 793 insertions(+), 1331 deletions(-) delete mode 100644 04-JavaScript基础/23-通过style对象设置行内样式.md create mode 100644 04-JavaScript基础/27-事件对象Event.md create mode 100644 04-JavaScript基础/28-事件的冒泡.md delete mode 100644 04-JavaScript基础/31-事件对象Event和冒泡.md rename 04-JavaScript基础/{32-BOM的常见内置方法和内置对象.md => BOM的常见内置方法和内置对象.md} (100%) rename 04-JavaScript基础/{52-JS的小知识.md => JS的小知识.md} (100%) rename 04-JavaScript基础/{33-原型链.md => 原型链.md} (100%) rename 04-JavaScript基础/{51-常见代码解读.md => 常见代码解读.md} (100%) diff --git a/04-JavaScript基础/23-通过style对象设置行内样式.md b/04-JavaScript基础/23-通过style对象设置行内样式.md deleted file mode 100644 index 67f3ad4..0000000 --- a/04-JavaScript基础/23-通过style对象设置行内样式.md +++ /dev/null @@ -1,502 +0,0 @@ - - -## style属性的获取和修改 - -在DOM当中，如果想设置样式，有两种形式： - -- className（针对内嵌样式） - -- style（针对行内样式） - -这篇文章，我们就来讲一下style。 - -需要注意的是：style是一个对象，只能获取**行内样式**，不能获取内嵌的样式和外链的样式。例如： - -```html - - - - - Title - - - - -
- - - - -``` - -打印结果： - -![](http://img.smyhvae.com/20180129_1407.png) - -上图显示，因为border属性不是行内样式，所以无法通过style对象获取。 - -### 通过 js 读取元素的样式 - -语法：（方式一） - -```javascript - 元素.style.样式名 -``` - -备注：我们通过style属性读取的样式都是**行内样式**。 - -语法：（方式二） - -```javascript - 元素.style["属性"]; //格式 - - box.style["width"]; //举例 -``` - -方式二最大的优点是：可以给属性传递参数。 - -### 通过 js 修改元素的样式 - -语法： - -```javascript - 元素.style.样式名 = 样式值; -``` - -举例： - -``` - box1.style.width = "300px"; - box1.style.backgroundColor = "red"; // 驼峰命名法 - -``` - -备注：我们通过style属性设置的样式都是**行内样式**，而行内样式有较高的优先级。但是如果在样式中的其他地方写了`!important`，则此时`!important`会有更高的优先级。 - -### style属性的注意事项 - -style属性需要注意以下几点： - -（1）样式少的时候使用。 - -（2）style是对象。我们在上方已经打印出来，typeof的结果是Object。 - -（3）值是字符串，没有设置值是“”。 - -（4）命名规则，驼峰命名。 - -（5）只能获取行内样式，和内嵌和外链无关。 - -（6）box.style.cssText = “字符串形式的样式”。 - - -`cssText`这个属性，其实就是把行内样式里面的值当做字符串来对待。在上方代码的基础之上，举例： - -```html - -``` - -打印结果： - -![](http://img.smyhvae.com/20180129_1410.png) - -### style的常用属性 - -style的常用属性包括： - -- backgroundColor - -- backgroundImage - -- color - -- width - -- height - -- border - -- opacity 设置透明度 (IE8以前是filter: alpha(opacity=xx)) - -注意DOM对象style的属性和标签中style内的值不一样，因为在JS中，`-`不能作为标识符。比如： - -- DOM中：backgroundColor - -- CSS中：background-color - -## style属性的举例 - -我们针对上面列举的几个style的样式，来举几个例子： - -- 举例1、改变div的大小和透明度 - -- 举例2、当前输入的文本框高亮显示 - -- 举例3、高级隔行变色、高亮显示 - -下面来逐一实现。 - -### 举例1：改变div的大小和透明度 - -代码举例： - -```html - -
- - - -``` - -### 举例2：当前输入的文本框高亮显示 - -代码实现： - -```html - - - - - - - - - - - - - - -``` - -### 举例3：高级隔行变色、高亮显示 - -```html - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
序号姓名课程成绩
- 1 - 生命壹号语文100
- 2 - 生命贰号日语99
- 3 - 生命叁号营销学98
- 4 - 生命伍号数学90
- 5 - 许嵩英语96
- 6 - vae体育90
-
- - - - - - -``` - -实现的效果如下： - -![](http://img.smyhvae.com/20180129_1520.gif) - -代码解释： - -上方代码中，我们**用到了计数器myColor来记录每一行最原始的颜色**（赋值白色之前）。如果不用计数器，可能很多人以为代码是写的：（错误的代码） - -```html - - -``` - -这种错误的代码，实现的效果却是：（未达到效果） - -![](http://img.smyhvae.com/20180129_1525.gif) - -## 通过 js 获取元素当前显示的样式 - -我们在上面的内容中，通过`元素.style.className`的方式只能获取**行内样式**。但是，有些元素，只写了**内嵌样式或外链样式**。 - -既然样式有这么种，那么，如何获取元素当前显示的样式（包括行内样式、内嵌样式、外链样式）呢？我们接下来看一看。 - -### 获取元素当前正在显示的样式 - -（1）w3c的做法： - -```javascript - window.getComputedStyle("要获取样式的元素", "伪元素"); -``` - -两个参数都是必须要有的。参数二中，如果没有伪元素就用 null 代替（一般都传null）。 - -（2）IE和opera的做法： - -```javascript - obj.currentStyle; -``` - -注意： - -- 如果当前元素没有设置该样式，则获取它的默认值。 - -- 该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过`对象.样式名`来读取具体的某一个样式。 - -- 通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性。 - -综合上面两种写法，就有了一种兼容性的写法，同时将其封装。代码举例如下： - -```html - - - - - - - - - -
- - - - -``` - -打印结果： - -![](http://img.smyhvae.com/20180204_1425.png) - - diff --git a/04-JavaScript基础/27-事件对象Event.md b/04-JavaScript基础/27-事件对象Event.md new file mode 100644 index 0000000..5144e8d --- /dev/null +++ b/04-JavaScript基础/27-事件对象Event.md @@ -0,0 +1,505 @@ + + +## 绑定事件的两种方式/DOM事件的级别 + +我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定（注册）事件的两种方式，我们以onclick事件为例。 + +### DOM0的写法：onclick + + +```javascript + element.onclick = function () { + + } +``` + +举例： + +```html + + + + + +``` + +点击按钮后，上方代码的打印结果： + +```html +事件2 +``` + +我们可以看到，这种绑定事件的方式，会层叠掉之前的事件。 + +### DOM2的写法：addEventListener + +```javascript + element.addEventListener('click', function () { + + }, false); +``` + + +参数解释： + +- 参数1：事件名(注意，没有on) + +- 参数2：事件名(执行函数) + +- 参数3：**true表示捕获阶段触发，false表示冒泡阶段触发（默认）**。如果不写，则默认为false。【重要】 + +举例： + +```html + + + + +``` + +点击按钮后，上方代码的打印结果： + + +```html + 事件1 + 事件2 +``` + +我们可以看到，这种绑定事件的方式，不会层叠掉之前的事件。 + +## 事件对象 + +当事件的响应函数被触发时，会产生一个事件对象`event`。浏览器每次都会将这个事件`event`作为实参传进之前的响应函数。 + +这个对象中包含了与当前事件相关的一切信息。比如鼠标的坐标、键盘的哪个按键被按下、鼠标滚轮滚动的方向等。 + +### 获取 event 对象（兼容性问题） + +所有浏览器都支持event对象，但支持的方式不同。如下。 + +（1）普通浏览器的写法是 `event`。比如： + +![](http://img.smyhvae.com/20180203_1735.png) + +（2）ie 678 的写法是 `window.event`。此时，事件对象 event 是作为window对象的属性保存的。 + +于是，我们可以采取一种兼容性的写法。如下： + +```javascript + event = event || window.event; // 兼容性写法 +``` + +代码举例： + +```html + + + + + + + + + + +``` + +### event 属性 + +event 有很多属性，比如： + +![](http://img.smyhvae.com/20180203_1739.png) + +由于pageX 和 pageY的兼容性不好，我们可以这样做： + +- 鼠标在页面的位置 = 滚动条滚动的距离 + 可视区域的坐标。 + +## Event举例 + +### 举例1：使 div 跟随鼠标移动 + +代码实现： + +```html + + + + + + + + + + +
+ + +``` + +### 举例2：获取鼠标距离所在盒子的距离 + +关键点： + +``` + 鼠标距离所在盒子的距离 = 鼠标在整个页面的位置 - 所在盒子在整个页面的位置 +``` + +代码演示： + +```html + + + + + + + + +
+ +
+ + + + + +``` + +实现效果： + +![](http://img.smyhvae.com/20180203_1828.gif) + +### 举例3：商品放大镜 + +代码实现： + +（1）index.html: + +```html + + + + + + + + + + + +
+
+ +
+
+
+ +
+
+ + +``` + +（2）tools.js: + +```javascript +/** + * Created by smyhvae on 2018/02/03. + */ + +//显示和隐藏 +function show(ele) { + ele.style.display = "block"; +} + +function hide(ele) { + ele.style.display = "none"; +} + +function scroll() { // 开始封装自己的scrollTop + if (window.pageYOffset != null) { // ie9+ 高版本浏览器 + // 因为 window.pageYOffset 默认的是 0 所以这里需要判断 + return { + left: window.pageXOffset, + top: window.pageYOffset + } + } + else if (document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD + return { + left: document.documentElement.scrollLeft, + top: document.documentElement.scrollTop + } + } + return { // 未声明 DTD + left: document.body.scrollLeft, + top: document.body.scrollTop + } +} + +``` + +效果演示： + +![](http://img.smyhvae.com/20180203_1920.gif) + + +## 我的公众号 + +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/2016040102.jpg) diff --git a/04-JavaScript基础/28-事件的冒泡.md b/04-JavaScript基础/28-事件的冒泡.md new file mode 100644 index 0000000..20c8f12 --- /dev/null +++ b/04-JavaScript基础/28-事件的冒泡.md @@ -0,0 +1,288 @@ + + +## DOM事件流 + +事件传播的三个阶段是：事件捕获、事件冒泡和目标。 + +- 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标 target。（从祖先元素往子元素查找，DOM树结构）。在这个过程中，事件相应的监听函数是不会被触发的。 + +- 事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。 + +- 事件冒泡阶段：事件从事件目标 target 开始，往上冒泡直到页面的最上一级标签。（从子元素到祖先元素冒泡） + +如下图所示： + +![](http://img.smyhvae.com/20180204_1218.jpg) + +PS：这个概念类似于 Android 里的 **touch 事件传递**。 + + +### 事件捕获 + +addEventListener可以捕获事件： + +```javascript + box1.addEventListener("click", function () { + alert("捕获 box3"); + }, true); +``` + +上面的方法中，参数为true，代表事件在捕获阶段执行。 + +代码演示： + +```javascript + //参数为true，代表捕获；参数为false或者不写参数，代表冒泡 + box3.addEventListener("click", function () { + alert("捕获 child"); + }, true); + + box2.addEventListener("click", function () { + alert("捕获 father"); + }, true); + + box1.addEventListener("click", function () { + alert("捕获 grandfather"); + }, true); + + document.addEventListener("click", function () { + alert("捕获 body"); + }, true); +``` + +效果演示： + +![](http://img.smyhvae.com/20180204_1101.gif) + + +**说明**：捕获阶段，事件依次传递的顺序是：window --> document --> html--> body --> 父元素、子元素、目标元素。 + +PS1：第一个接收到事件的对象是 **window**（有人会说body，有人会说html，这都是错误的）。 + +PS2：JS中涉及到DOM对象时，有两个对象最常用：window、doucument。它们俩也是最先获取到事件的。 + + +事件捕获阶段的完整写法是： + +```javascript + window.addEventListener("click", function () { + alert("捕获 window"); + }, true); + + document.addEventListener("click", function () { + alert("捕获 document"); + }, true); + + document.documentElement.addEventListener("click", function () { + alert("捕获 html"); + }, true); + + document.body.addEventListener("click", function () { + alert("捕获 body"); + }, true); + + fatherBox.addEventListener("click", function () { + alert("捕获 father"); + }, true); + + childBox.addEventListener("click", function () { + alert("捕获 child"); + }, true); + +``` + + +**补充一个知识点：** + +在 js中： + +- 如果想获取 `html`节点，方法是`document.documentElement`。 + +- 如果想获取 `body` 节点，方法是：`document.body`。 + +二者不要混淆了。 + + + + + +### 事件冒泡 + +**事件冒泡**: 当一个元素上的事件被触发的时候（比如说鼠标点击了一个按钮），同样的事件将会在那个元素的所有**祖先元素**中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。 + + +通俗来讲，冒泡指的是：**子元素的事件被触发时，父盒子的同样的事件也会被触发**。取消冒泡就是取消这种机制。 + +代码演示： + +```javascript + //事件冒泡 + box3.onclick = function () { + alert("child"); + } + + box2.onclick = function () { + alert("father"); + } + + box1.onclick = function () { + alert("grandfather"); + } + + document.onclick = function () { + alert("body"); + } + +``` + +![](http://img.smyhvae.com/20180204_1028.gif) + +上图显示，当我点击儿子 box3的时候，它的父亲box2、box1、body都依次被触发了。即使我改变代码的顺序，也不会影响效果的顺序。 + +当然，上面的代码中，我们用 addEventListener 这种 DOM2的写法也是可以的，但是第三个参数要写 false，或者不写。 + +**冒泡顺序**： + +一般的浏览器: （除IE6.0之外的浏览器） + +- div -> body -> html -> document -> window + +IE6.0： + +- div -> body -> html -> document + +### 不是所有的事件都能冒泡 + +以下事件不冒泡：blur、focus、load、unload、onmouseenter、onmouseleave。意思是，事件不会往父元素那里传递。 + +我们检查一个元素是否会冒泡，可以通过事件的以下参数： + +```javascript + event.bubbles +``` + +如果返回值为true，说明该事件会冒泡；反之则相反。 + +举例： + +```javascript + box1.onclick = function (event) { + alert("冒泡 child"); + + event = event || window.event; + console.log(event.bubbles); //打印结果：true + } +``` + +### 阻止冒泡的方法 + +w3c的方法：（火狐、谷歌、IE11） + +```javascript + event.stopPropagation(); +``` + +IE10以下则是： + +```javascript +event.cancelBubble = true +``` + +兼容代码如下： + +```javascript + box3.onclick = function (event) { + + alert("child"); + + //阻止冒泡 + event = event || window.event; + + if (event && event.stopPropagation) { + event.stopPropagation(); + } else { + event.cancelBubble = true; + } + } +``` + +上方代码中，我们对box3进行了阻止冒泡，产生的效果是：事件不会继续传递到 father、grandfather、body了。 + +## 事件委托 + +事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。 + +比如说有一个列表 ul，列表之中有大量的列表项 li： + +```html + +``` + + +当我们的鼠标移到Li上的时候，需要获取此Li的相关信息并飘出悬浮窗以显示详细信息，或者当某个Li被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个Li都绑定类似onMouseOver或者onClick之类的事件监听： + + +```javascript + //每个 li 中做的事情 + function addListeners4Li(liNode){ + liNode.onclick = function clickHandler(){...}; + liNode.onmouseover = function mouseOverHandler(){...} + } + + window.onload = function(){ + var ulNode = document.getElementById("parent-list"); + var liNodes = ulNode.getElementByTagName("Li"); + for(var i=0, l = liNodes.length; i < l; i++){ + addListeners4Li(liNodes[i]); + } + } +``` + +但是，上面的做法会消耗内存和性能。 + + +因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 `ul` 上，然后在执行事件的时候再去匹配判断目标元素。如下： + + + +```javascript + // 获取父节点，并为它注册click事件。 false 表示事件在冒泡阶段触发（默认） + document.getElementById("parent-list").addEventListener("click", function (e) { + // event.target 代表的是子元素。toUpperCase()方法 指的是转换为大写字母并返回 + if (e.target && e.target.nodeName.toUpperCase() == "LI") { + // 真正的处理过程在这里 + console.log("List item ", e.target.id, " was clicked!"); + } + }, false); + +``` + + +上方代码，为父节点注册click事件，当子节点被点击的时候，click事件会从子节点开始**向上冒泡**。**父节点捕获到事件**之后，开始执行方法体里的内容：通过判断 e.target 拿到了被点击的子节点li。从而可以获取到相应的信息，并作处理。 + +换而言之，事件是在父节点上注册的，参数为false，说明事件是在冒泡阶段触发（往上传递），那就只有父节点能拿到事件，子节点是不可能拿到事件的。 + +所以事件委托可以减少大量的内存消耗，提高效率。 + +事件委托的参考链接： + +- [荐 | JavaScript事件代理和委托（Delegation）](https://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html) + +- [JavaScript 事件委托详解](https://zhuanlan.zhihu.com/p/26536815) + + + +## 我的公众号 + +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/20190101.png) diff --git a/04-JavaScript基础/31-事件对象Event和冒泡.md b/04-JavaScript基础/31-事件对象Event和冒泡.md deleted file mode 100644 index 2d271fc..0000000 --- a/04-JavaScript基础/31-事件对象Event和冒泡.md +++ /dev/null @@ -1,829 +0,0 @@ - - -> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8413602.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 - -> 以下是正文。 - - -## 绑定事件的两种方式/DOM事件的级别 - -我们在上一篇文章 [DOM操作详解](http://www.cnblogs.com/smyhvae/p/8366012.html) 中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。 - -### DOM0的写法：onclick - - - -```javascript - element.onclick = function () { - - } -``` - - -举例： - - -```html - - - - - -``` - -点击按钮后，上方代码的打印结果： - -```html -事件2 -``` - -我们可以看到，这种绑定事件的方式，会层叠掉之前的事件。 - -### DOM2的写法：addEventListener - - - -```javascript - element.addEventListener('click', function () { - - }, false); -``` - - -参数解释： - -- 参数1：事件名(注意，没有on) - -- 参数2：事件名(执行函数) - -- 参数3：**true表示捕获阶段触发，false表示冒泡阶段触发（默认）**。如果不写，则默认为false。【重要】 - -举例： - -```html - - - - -``` - -点击按钮后，上方代码的打印结果： - - -```html - 事件1 - 事件2 -``` - -我们可以看到，这种绑定事件的方式，不会层叠掉之前的事件。 - -## 事件对象 - -在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。 - -所有浏览器都支持event对象，但支持的方式不同。如下。 - -（1）普通浏览器支持 event。比如： - -![](http://img.smyhvae.com/20180203_1735.png) - -（2）ie 678 支持 window.event。 - -于是，我们可以采取一种兼容性的写法。如下： - -```javascript - event = event || window.event; ////兼容性写法 -``` - -代码举例： - -```html - - - - - - - - - - -``` - - -### event 属性 - -event 有很多属性，比如： - -![](http://img.smyhvae.com/20180203_1739.png) - -由于pageX 和 pageY的兼容性不好，我们可以这样做： - -- 鼠标在页面的位置 = 被卷去的部分+可视区域部分。 - -## Event举例 - -### 举例1：鼠标跟随 - -代码实现： - -```html - - - - - - - - - - - - - - -``` - -实现效果： - -![](http://img.smyhvae.com/20180203_1810.gif) - -## event应用举例：获取鼠标距离所在盒子的距离 - -关键点： - -``` - 鼠标距离所在盒子的距离 = 鼠标在整个页面的位置 - 所在盒子在整个页面的位置 -``` - -代码演示： - -```html - - - - - - - - -
- -
- - - - - -``` - -实现效果： - -![](http://img.smyhvae.com/20180203_1828.gif) - -**举例：商品放大镜** - -代码实现： - -（1）index.html: - -```html - - - - - - - - - - - -
-
- -
-
-
- -
-
- - -``` - -（2）tools.js: - -```javascript -/** - * Created by smyhvae on 2018/02/03. - */ - -//显示和隐藏 -function show(ele) { - ele.style.display = "block"; -} - -function hide(ele) { - ele.style.display = "none"; -} - -function scroll() { // 开始封装自己的scrollTop - if (window.pageYOffset != null) { // ie9+ 高版本浏览器 - // 因为 window.pageYOffset 默认的是 0 所以这里需要判断 - return { - left: window.pageXOffset, - top: window.pageYOffset - } - } - else if (document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD - return { - left: document.documentElement.scrollLeft, - top: document.documentElement.scrollTop - } - } - return { // 未声明 DTD - left: document.body.scrollLeft, - top: document.body.scrollTop - } -} - -``` - -效果演示： - -![](http://img.smyhvae.com/20180203_1920.gif) - -## 小窗口拖拽案例 - -暂略。 - -## DOM事件流 - -事件传播的三个阶段是：事件捕获、事件冒泡和目标。 - -- 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标 target。（从祖先元素往子元素查找，DOM树结构）。在这个过程中，事件相应的监听函数是不会被触发的。 - -- 事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。 - -- 事件冒泡阶段：事件从事件目标 target 开始，往上冒泡直到页面的最上一级标签。（从子元素到祖先元素冒泡） - -如下图所示： - -![](http://img.smyhvae.com/20180204_1218.jpg) - -PS：这个概念类似于 Android 里的 **touch 事件传递**。 - - -### 事件捕获 - -addEventListener可以捕获事件： - -```javascript - box1.addEventListener("click", function () { - alert("捕获 box3"); - }, true); -``` - -上面的方法中，参数为true，代表事件在捕获阶段执行。 - -代码演示： - -```javascript - //参数为true，代表捕获；参数为false或者不写参数，代表冒泡 - box3.addEventListener("click", function () { - alert("捕获 child"); - }, true); - - box2.addEventListener("click", function () { - alert("捕获 father"); - }, true); - - box1.addEventListener("click", function () { - alert("捕获 grandfather"); - }, true); - - document.addEventListener("click", function () { - alert("捕获 body"); - }, true); -``` - -效果演示： - -![](http://img.smyhvae.com/20180204_1101.gif) - - -**说明**：捕获阶段，事件依次传递的顺序是：window --> document --> html--> body --> 父元素、子元素、目标元素。 - -PS1：第一个接收到事件的对象是 **window**（有人会说body，有人会说html，这都是错误的）。 - -PS2：JS中涉及到DOM对象时，有两个对象最常用：window、doucument。它们俩也是最先获取到事件的。 - - -事件捕获阶段的完整写法是： - -```javascript - window.addEventListener("click", function () { - alert("捕获 window"); - }, true); - - document.addEventListener("click", function () { - alert("捕获 document"); - }, true); - - document.documentElement.addEventListener("click", function () { - alert("捕获 html"); - }, true); - - document.body.addEventListener("click", function () { - alert("捕获 body"); - }, true); - - fatherBox.addEventListener("click", function () { - alert("捕获 father"); - }, true); - - childBox.addEventListener("click", function () { - alert("捕获 child"); - }, true); - -``` - - -**补充一个知识点：** - -在 js中： - -- 如果想获取 `html`节点，方法是`document.documentElement`。 - -- 如果想获取 `body` 节点，方法是：`document.body`。 - -二者不要混淆了。 - - - - - -### 事件冒泡 - -**事件冒泡**: 当一个元素上的事件被触发的时候（比如说鼠标点击了一个按钮），同样的事件将会在那个元素的所有**祖先元素**中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。 - - -通俗来讲，冒泡指的是：**子元素的事件被触发时，父盒子的同样的事件也会被触发**。取消冒泡就是取消这种机制。 - -代码演示： - -```javascript - //事件冒泡 - box3.onclick = function () { - alert("child"); - } - - box2.onclick = function () { - alert("father"); - } - - box1.onclick = function () { - alert("grandfather"); - } - - document.onclick = function () { - alert("body"); - } - -``` - -![](http://img.smyhvae.com/20180204_1028.gif) - -上图显示，当我点击儿子 box3的时候，它的父亲box2、box1、body都依次被触发了。即使我改变代码的顺序，也不会影响效果的顺序。 - -当然，上面的代码中，我们用 addEventListener 这种 DOM2的写法也是可以的，但是第三个参数要写 false，或者不写。 - -**冒泡顺序**： - -一般的浏览器: （除IE6.0之外的浏览器） - -- div -> body -> html -> document -> window - -IE6.0： - -- div -> body -> html -> document - -### 不是所有的事件都能冒泡 - -以下事件不冒泡：blur、focus、load、unload、onmouseenter、onmouseleave。意思是，事件不会往父元素那里传递。 - -我们检查一个元素是否会冒泡，可以通过事件的以下参数： - -```javascript - event.bubbles -``` - -如果返回值为true，说明该事件会冒泡；反之则相反。 - -举例： - -```javascript - box1.onclick = function (event) { - alert("冒泡 child"); - - event = event || window.event; - console.log(event.bubbles); //打印结果：true - } -``` - -### 阻止冒泡的方法 - -w3c的方法：（火狐、谷歌、IE11） - -```javascript - event.stopPropagation(); -``` - -IE10以下则是： - -```javascript -event.cancelBubble = true -``` - -兼容代码如下： - -```javascript - box3.onclick = function (event) { - - alert("child"); - - //阻止冒泡 - event = event || window.event; - - if (event && event.stopPropagation) { - event.stopPropagation(); - } else { - event.cancelBubble = true; - } - } -``` - -上方代码中，我们对box3进行了阻止冒泡，产生的效果是：事件不会继续传递到 father、grandfather、body了。 - -## 事件委托 - -事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。 - -比如说有一个列表 ul，列表之中有大量的列表项 li： - -```html - -``` - - -当我们的鼠标移到Li上的时候，需要获取此Li的相关信息并飘出悬浮窗以显示详细信息，或者当某个Li被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个Li都绑定类似onMouseOver或者onClick之类的事件监听： - - -```javascript - //每个 li 中做的事情 - function addListeners4Li(liNode){ - liNode.onclick = function clickHandler(){...}; - liNode.onmouseover = function mouseOverHandler(){...} - } - - window.onload = function(){ - var ulNode = document.getElementById("parent-list"); - var liNodes = ulNode.getElementByTagName("Li"); - for(var i=0, l = liNodes.length; i < l; i++){ - addListeners4Li(liNodes[i]); - } - } -``` - -但是，上面的做法会消耗内存和性能。 - - -因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 `ul` 上，然后在执行事件的时候再去匹配判断目标元素。如下： - - - -```javascript - // 获取父节点，并为它注册click事件。 false 表示事件在冒泡阶段触发（默认） - document.getElementById("parent-list").addEventListener("click", function (e) { - // event.target 代表的是子元素。toUpperCase()方法 指的是转换为大写字母并返回 - if (e.target && e.target.nodeName.toUpperCase() == "LI") { - // 真正的处理过程在这里 - console.log("List item ", e.target.id, " was clicked!"); - } - }, false); - -``` - - -上方代码，为父节点注册click事件，当子节点被点击的时候，click事件会从子节点开始**向上冒泡**。**父节点捕获到事件**之后，开始执行方法体里的内容：通过判断 e.target 拿到了被点击的子节点li。从而可以获取到相应的信息，并作处理。 - -换而言之，事件是在父节点上注册的，参数为false，说明事件是在冒泡阶段触发（往上传递），那就只有父节点能拿到事件，子节点是不可能拿到事件的。 - -所以事件委托可以减少大量的内存消耗，提高效率。 - -事件委托的参考链接： - -- [荐 | JavaScript事件代理和委托（Delegation）](https://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html) - -- [JavaScript 事件委托详解](https://zhuanlan.zhihu.com/p/26536815) - - - -## 我的公众号 - -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 - -扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： - -![](http://img.smyhvae.com/2016040102.jpg) diff --git a/04-JavaScript基础/32-BOM的常见内置方法和内置对象.md b/04-JavaScript基础/BOM的常见内置方法和内置对象.md similarity index 100% rename from 04-JavaScript基础/32-BOM的常见内置方法和内置对象.md rename to 04-JavaScript基础/BOM的常见内置方法和内置对象.md diff --git a/04-JavaScript基础/52-JS的小知识.md b/04-JavaScript基础/JS的小知识.md similarity index 100% rename from 04-JavaScript基础/52-JS的小知识.md rename to 04-JavaScript基础/JS的小知识.md diff --git a/04-JavaScript基础/33-原型链.md b/04-JavaScript基础/原型链.md similarity index 100% rename from 04-JavaScript基础/33-原型链.md rename to 04-JavaScript基础/原型链.md diff --git a/04-JavaScript基础/51-常见代码解读.md b/04-JavaScript基础/常见代码解读.md similarity index 100% rename from 04-JavaScript基础/51-常见代码解读.md rename to 04-JavaScript基础/常见代码解读.md