forked from IT-xzy/WEB-NEW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1053-js-4.html
287 lines (261 loc) · 16.4 KB
/
1053-js-4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? './css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<img src="./img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
<div class="slides">
<section>
<h2>
IE事件流和W3C事件流有什么区别，参数分别是什么，以及如何阻止事件冒泡？
</h2>
<h3></h3>
<p>分享人：杨星</p>
</section>
<section>
<p>目录</p>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section>
<h3>1.背景介绍</h3>
</section>
<section style="text-align: center;">
<section>
<h4>事件</h4>
<div style="text-align: left;overflow: auto;text-indent: 60px;font-size: 30px;line-height: 50px;">
<p >
JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
它是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。
</p>
<p>
事件是javaScript和DOM之间交互的桥梁。
</p>
<p>
你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。
典型的例子有：页面加载完毕触发load事件；用户单击元素，触发click事件。
</p>
</div>
</section>
<section >
<h4>事件流</h4>
<div style="text-align: left;text-indent: 60px;font-size: 30px;line-height: 50px;">
<p>
事件流描述的是从页面中接收事件的顺序。
</p>
<p>
当浏览器发展到第四代时(IE4及Netscape4)，浏览器开发团队遇到了一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？
可以想象画在一张纸上的一组同心圆。如果你把手指放在圆心上，那么你的手指指向的不是同一个圆，而是纸上的所有圆。
</p>
<p>
IE和网景两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上。
在单击按钮的同时，也单击了按钮的容器元素，甚至也单击了整个页面。
</p>
<p>
IE提出的是冒泡流,而网景提出的是捕获流,后来在W3C组织的统一之下,JS支持了冒泡流和捕获流,
但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流),所以为了能够兼容更多的浏览器,建议大家使用冒泡流。
</p>
</div>
</section>
</section>
<section>
<h3>2.知识剖析</h3>
</section>
<section >
<section >
<h4>事件冒泡</h4>
<div style="text-align: left;text-indent: 60px;font-size: 30px;line-height: 50px;">
<p>
IE的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，
然后逐级向上传播到较为不具体的节点（文档）。也就是子级元素先触发，父级元素后触发。
</p>
</div>
<h4>事件捕获</h4>
<div style="text-align: left;text-indent: 60px;font-size: 30px;line-height: 50px;">
<p>
网景团队提出的另一种事件流叫事件捕获（event capturing)。
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
也就是父级元素先触发，子级元素后触发。
</p>
</div>
</section>
<section>
<img src="img/123.png">
<div style="overflow-y: auto;height:300px;">
<p style="text-align: left;text-indent: 60px;font-size: 27px;line-height: 60px;">
在冒泡型事件流中click事件传播顺序为div—》body—》html—》document<br/>
在捕获型事件流中click事件传播顺序为document—》html—》body—》div<br/>
</p>
</div>
</section>
<section>
<h4>DOM事件流</h4>
<p style="text-align: left;font-size: 27px;line-height: 40px;overflow-y: scroll;height:260px">
DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。<br/>
DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。<br/>
事件捕获阶段：实际目标div在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到html再到body就停止了。(图中为1~3.)<br/>
处于目标阶段：事件在div上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。<br/>
冒泡阶段：事件又传播回文档。
</p>
</section>
<section>
<p style="text-align: left;font-size: 27px;line-height: 40px;text-indent: 60px">
可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，
它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。
</p>
<pre style="height:40px;">
<code>element.addEventListener(event, function, useCapture)</code>
</pre>
<p style="text-align: left;font-size: 27px;line-height: 40px;">
event:字符串，指定事件名。（不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。）<br/>
function:指定要事件触发时执行的函数。<br/>
useCapture:可选。布尔值，指定事件是否在捕获或冒泡阶段执行。(true - 事件句柄在捕获阶段执行;false- false- 默认。事件句柄在冒泡阶段执行)
</p>
<p style="text-align: left;font-size: 27px;line-height: 40px;">
IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。
<pre style="height:40px;">
<code> element.attachEvent("onclick", doSomething2);</code>
</pre>
</p>
</section>
</section>
<section style="text-align: left">
<section style="text-align: center"><h3>3.常见问题</h3></section>
<section style="text-align: left">
<h4 style="text-align: center">如何阻止事件冒泡？</h4>
</section>
</section>
<section style="text-align: left">
<section style="text-align: center"><h3>4 解决方案</h3></section>
<section>
<p>
事件的传播是可以阻止的：<br/>
• 在W3c中，使用event.stopPropagation()方法<br/>
• 在IE下设置event.cancelBubble = true；
</p>
</section>
</section>
<section style="text-align: left">
<section style="text-align: center"><h3>5.编码实战</h3></section>
</section>
<section style="text-align: left">
<section>
<h3 style="text-align: center">6.扩展思考</h3>
</section>
<section style="text-align: center">
<h4>事件委托</h4>
<div style="overflow-y: auto;height:586px">
<p style="text-align: left;text-indent: 60px;font-size: 27px;line-height: 50px;">
事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素；一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，
真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
</p>
<p style="text-align: left;text-indent: 60px;font-size: 27px;line-height: 50px;">
有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。
前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。
这里其实还有2层意思的：
第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；
第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。
</p>
<p style="text-align: left;text-indent: 60px;font-size: 27px;line-height: 50px;">
一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？
在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了，比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，自然性能就会更好。
</p>
</div>
</section>
</section>
<section>
<h3>7.参考文献</h3>
<p>参考1：<a href="http://www.cnblogs.com/starof/p/4066381.html">javaScript事件（一）事件流</a></p>
<p>参考2：<a href="http://www.jb51.net/article/42492.htm">js之事件冒泡和事件捕获详细介绍</a></p>
<p>参考3：<a href="https://zhuanlan.zhihu.com/p/26536815">JavaScript 事件委托详解</a></p>
<p>参考2：<a href="http://www.cnblogs.com/liugang-vip/p/5616484.html">js中的事件委托或是事件代理详解</a></p>
</section>
<section>
<h3>8 更多讨论</h3>
</section>
<section>
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p><small>BY : 杨星</small></p>
</section>
</div>
</div>
<script>
angular.module("myApp", [])
.controller('demoCtrl',function ($scope) {
$scope.aa='as111111'
})
.directive('demoOne',function () {
return{
restrict:"AECM",
template:'<input type="text" ng-model="aa">',
replace: true,
scope:{},
controller:['$scope',function ($scope) {
$scope.aa='ss1212'
}]
}
})
</script>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [
{ src: './plugin/markdown/marked.js' },
{ src: './plugin/markdown/markdown.js' },
{ src: './plugin/notes/notes.js', async: true },
{ src: './plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>