事件冒泡、事件捕获、http与https

事件流、事件冒泡、事件捕获、阻止事件冒泡、http与https

事件流、事件冒泡、事件捕获、阻止事件冒泡、http与https
一、事件流
二、事件冒泡
三、事件捕获
四、阻止事件冒泡
五、取消默认事件
六、http与https
- （一）、HTTP和HTTPS的基本概念
- （二）、HTTP与HTTPS有什么区别
- （三）、HTTPS的工作原理
- （四）、HTTPS的优点
- （五）、HTTPS的缺点
- （六）、HTTP切换到HTTPS

一、事件流

1、事件：事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。
注：事件是javaScript和DOM之间交互的桥梁，若用户触发，浏览器便执行事件，事件发生时，调用它的处理函数执行相应的JavaScript代码给出响应
事件典型例子：页面加载完毕触发load事件；用户单击元素，触发click事件
2、DOM事件流：当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程叫作DOM事件流
元素触发事件时，事件的传播过程称为事件流，过程分为捕获和冒泡两种
3、“DOM2级事件”，规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先是事件捕获阶段；然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出相应，详细如下图所示
4、DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束
5、DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段

事件捕获阶段：实际目标（

）在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到再到就停止了。上图中为1~3。
处于目标阶段：事件在
上发生并处理。但是事件处理会被看成是冒泡阶段的一部分
冒泡阶段：事件又传播回文档
注意：
（1）尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标，但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两次机会在目标对象上面操作事件。
（2）并非所有的事件都会经过冒泡阶段。所有的事件都要经过捕获阶段和处于目标阶段，但是有些事件会跳过冒泡阶段：如，获得输入焦点的focus事件和失去输入焦点的blur事件

二、事件冒泡

1、冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根，也就是子元素传递到父元素的过程
2、示例代码如下

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<div id="myDiv">Click me!</div>
</body>
</html>

上面这段html代码中，单击了页面中的

元素，click事件传播顺序为

<div> — > <body> — > <html> — >document

图示如下:

三、事件捕获

1、捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子，也就是事件由父元素到子元素传递的过程
2、示例代码如下

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<div id="myDiv">Click me!</div>
</body>
</html>

上面这段html代码中，单击了页面中的

元素，click事件传播顺序为

document — > <html> — > <body> — > <div>

图示如下：
注意事项:
(1)所有现代浏览器都支持事件冒泡，但在具体实现中略有差别：

IE5.5及更早版本中事件冒泡会跳过元素(从body直接跳到document)
IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象
(2)IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。
(3）由于老版本浏览器不支持，很少有人使用事件捕获，建议使用事件冒泡

四、阻止事件冒泡

w3c的方法是e.stopPropagation()
IE则是使用e.cancelBubble = true
注：stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为，stopPropagation就是阻止目标元素的事件冒泡到父级元素
如：

<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li onclick='alert("li");'>test</li>
</ul>
</div>

上面的代码，Demo如下,我们单击test时，会依次触发alert(“li”),alert(“ul”),alert(“div”)，这就是事件冒泡，
以下代码则是阻止冒泡

window.event? window.event.cancelBubble = true : e.stopPropagation();

五、取消默认事件

w3c的方法是e.preventDefault()
IE则是使用e.returnValue = false
注：preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为，很多带有默认行为的元素，如
```
链接<a>，提交按钮<input type=”submit”>等
```

链接的默认动作就是跳转到指定页面，用以下例子来阻止超链接的默认行为

<a href="http://baidu.com/" id="testA" >百度</a>
var a = document.getElementById("testA");
a.onclick =function(e){if(e.preventDefault){e.preventDefault();
}else{window.event.returnValue == false;
}
}

注意：

javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等
event对象只在事件发生的过程中才有效
firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。
在IE/Opera中是window.event，在Firefox中是event；而事件的对象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中两者都可用

六、http与https

（一）、HTTP和HTTPS的基本概念

超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息，为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密
1、HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少
2、HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL
3、HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性

（二）、HTTP与HTTPS有什么区别

HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了SSL（Secure Sockets Layer）协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。简单来说，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全
HTTPS和HTTP的区别主要如下：

https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用
http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议
http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443
http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全

（三）、HTTPS的工作原理

客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤，如图所示
1）客户使用https的URL访问Web服务器，要求与Web服务器建立SSL连接
2）Web服务器收到客户端请求后，会将网站的证书信息（证书中包含公钥）传送一份给客户端
3）客户端的浏览器与Web服务器开始协商SSL连接的安全等级，也就是信息加密的等级
4）客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网站的公钥将会话密钥加密，并传送给网站
5）Web服务器利用自己的私钥解密出会话密钥
6）Web服务器利用会话密钥加密与客户端之间的通信

（四）、HTTPS的优点

1）使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器
2）HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性
3）HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本
4）谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”

（五）、HTTPS的缺点

1）HTTPS协议握手阶段比较费时，会使页面的加载时间延长近50%，增加10%到20%的耗电
2）HTTPS连接缓存不如HTTP高效，会增加数据开销和功耗，甚至已有的安全措施也会因此而受到影响
3）SSL证书需要钱，功能越强大的证书费用越高，个人网站、小网站没有必要一般不会用
4）SSL证书通常需要绑定IP，不能在同一IP上绑定多个域名，IPv4资源不可能支撑这个消耗
5）HTTPS协议的加密范围也比较有限，在黑客攻击、拒绝服务攻击、服务器劫持等方面几乎起不到什么作用。最关键的，SSL证书的信用链体系并不安全，特别是在某些国家可以控制CA根证书的情况下，中间人攻击一样可行

（六）、HTTP切换到HTTPS

需要将页面中所有的链接，例如js，css，图片等等链接都由http改为https。例如：http://www.baidu.com改为https://www.baidu.com
BTW，这里虽然将http切换为了https，还是建议保留http。所以我们在切换的时候可以做http和https的兼容，具体实现方式是，去掉页面链接中的http头部，这样可以自动匹配http头和https头。例如：将http://www.baidu.com改为//www.baidu.com。然后当用户从http的入口进入访问页面时，页面就是http，如果用户是从https的入口进入访问页面，页面即使https的。