JS中的事件概念

一、 事件的基本概念

        1.   事件：JavaScript可以侦测到的行为 (用户在页面上进行的某种操作)；

                页面加载（浏览器打开页面）、单击鼠标、鼠标进入某个区域、焦点、键盘

        2.  事件处理程序：用户进行某种操作后，所运行的js程序块

        3.  事件驱动式：当事件发生后才去执行相应的程序

        4.   事件流：事件发生时,会在发生事件的元素节点与DOM树根节点之间按照特定的顺

              序进行传播，这个事件传播的过程就是事件流。

        5.   在web中对事件流的解决方案：

                A.  事件捕获：网景公司（Netscape）

                B.  事件冒泡：微软公司（Microsoft）

                        冒泡的前提是：父级也定义了相应的事件，当子元素与父元素有相同的事件时，当

                        子元素的被触发时父元素也会被触发——冒泡机制

                捕获：从DOM树的根节点到发生事件的元素节点

                冒泡： 从发生事件的元素节点到DOM的根节点

                C.  W3C的事件的流处理：在事件发生阶段采用捕获方式（此时不处理），在事件处理

                      阶段采用冒泡

         6.   事件捕获的实现：

                addEventListener(事件名，事件处理程序 ， 事件处理方式）

                参数1：事件名（click、change 、 load、 mousedown...)

                参数2：事件处理程序

                参数3：默认为false----表示冒泡； true ----表示捕获

        二、 事件的绑定方式

                1.  行内绑定式： <标签名 事件名=“事件处理程序”></标签名>

                2.   动态绑定式： DOM对象名.事件名  =  事件处理程序

                两种方式的区别

                        a、 “行内绑定式”中事件名作为标签的属性，”动态绑定式”中事件名作为DOM对象

                                的属性

                        b、”行内绑定式”的事件处理程序中的this代表的是window对象，

                             ”动态绑定式”的事件处 理程序中的this代表的是触发事件的DOM对象

                 3.   事件监听式： 可以给DOM对象的同一个事件绑定多个事件处理程序

                                DOM对象.addEventListener(type, callback, [capture]);     //标准浏览器

                                 DOM对象.attachEvent(type, callback); //早期IE浏览器

           三、 删除事件绑定：

                 DOM对象.removeEventListener(type, callback);

          四、 事件对象

                 1.   来源：当事件发生时，都会产生一个事件对象（event对象）

                 2.   作用：通过事件对象可以了解与事件相关的信息

                                （DOM对象、事件的类型……）

                 3.    获取事件对象:

                        （1）早期的IE浏览器：window.event

                        （2）标准浏览器：将一个event对象直接传入事件处理程序中

                                即为 事件处理程序的参数

                 4.   常用属性：

                        （1）type：代表当前事件的类型

                        （2）target：返回触发此事件的元素（事件的目标节点）

                        （3）currentTarget：返回其事件监听器触发该事件的元素 

                        （4）bubbles：表示事件是否是冒泡事件类型

                5.   常用函数：

                         （1）stopPropagation()：阻止事件冒泡

                         （2）preventDefault()：阻止默认行为

        五、事件的分类 

                1、鼠标事件：

                        click  ：鼠标单击

                        dblclick：鼠标双击

                        mouseover：鼠标进入

                        mouseout：鼠标离开

                         change：当内容发生改变时触发—- input、select

                2、 页面事件

                        （1）load：页面加载事件。用于body内所有标签都加载完成后才触发

                        （2）unload：用于页面关闭时触发，经常用于清除变量，避免内存的泄露

                3、焦点事件：多用于表单验证

                        （1）focus：当获得焦点时触发

                        （2）blur：失去焦点时触发

                 4、在鼠标事件中，鼠标的位置信息的获取

                yi     （1）clientX：鼠标指针位于浏览器页面当前窗口可视区的水平坐标（X轴坐标）

                         （2）clientY：鼠标指针位于浏览器页面当前窗口可视区的垂直坐标（Y轴坐标）

                                                 page会存在兼容性

                         （3）pageX：鼠标指针位于文档的水平坐标（X轴坐标）

                         （4）pageY：鼠标指针位于文档的垂直坐标（Y轴坐标）

                          （5）screenX：鼠标指针位于屏幕的水平坐标（X轴坐标）

                         （6）screenY：鼠标指针位于屏幕的垂直坐标（Y轴坐标）

                        强调：事件对象的兼容性处理

                                早期IE浏览器版本获取事件对象的方法：window.even

                                标准浏览器获取事件对象的方法：event

                                如下：

                                 DOM对象.addEventListener(‘事件名称’，function(e){

                                         let my_event = e || window.event           //my_event变量为事件对象

                                }）

                                早期IE浏览器对事件对象的pageX和pageY的兼容性处理：

                              鼠标在文档中的坐标等于鼠标在当前窗口中的坐标加上滚动条卷去的文本长度

                                 滚动条的文本长度 ： document.documentElement.scrollTop;

                                                                   document.documentElement.scrollLeft;

                 5、键盘事件：用户在使用键盘时触发

                     （1）keypress：键盘上按键按下时触发，不包含非字符按键（crtl    alt    tab 等）。

                                                保存是按键的ASCII码值   

                     （2）keydown：键盘上按键按下时触发               keyup：键盘按键弹起时触发

                                keydown和keyup保存的是按键的虚拟键码

                 6、表单事件：操作表单时触发

                         submit：当表单提交时触发

                         reset：当表单重置时触发

深度思考：

1.如何做默认样式重置？resetting 和 normalizing 之间有什么区别？

1、什么是CSS RESET？

我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。 CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，

导致设计师 在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定 义的样式赋值，所以我们要先定义好一些CSS样式，

去“覆盖”浏览器的CSS默认属性， 来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。

RESET和NORMALIZE的区别

1. Normalize.css 保护了有价值的默认值

Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。 相比之下，Normalize.css保持了许多默认的浏览器样式。

这就意味着你不用再 为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时， 

Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

2. Normalize.css 修复了浏览器的bug

它修复了常见的桌面端和移动端浏览器的bug。 这往往超出了Reset所能做到的范畴。关于这一点， 

Normalize.css修复的问题包含了HTML5元素的显示设置、 预格式化文字的font-size问题、在IE9中SVG的溢出、

许多 出现在各浏览器和操作系统中的与表单相关的bug。

3. Normalize.css 不会让你的调试工具变的杂乱

使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。

4. Normalize.css 是模块化的

这个项目已经被拆分为多个相关却又独立的部分， 这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。 

因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。

5. Normalize.css 拥有详细的文档

Normalize.css的代码基于详细而全面的跨浏览器研究与测试。 这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。 

这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、 浏览器之间的差异，并且你可以更容易地进行自己的测试。

2.任务13所学到的架构知识，和任务12所学到的规范有没有冲突的地方？如果有冲突，你会选择哪种方式？为什么？

当多个CSS样式应用到同一个元素时，这些样式之间可能存在对同一个属性的不同格式设置，当发生冲突时，浏览器通过遵循以下原则来解决CSS冲突。

优先级原则

最近原则

同一属性的样式定义，后面定义的样式会覆盖前面定义的样式。

优先级原则：指的是优先级最高的样式有效，其中行内样式>内嵌式样式|链接外部样式，即行内样式的优先级最高，

而内嵌式样式和链接外部样式的优先级由它们出现的位置决定，谁出现在后面谁的优先级就高。在同类型的样式中，

选择器之间也存在不同的优先级，选择器的优先级规定为：

ID选择器>class选择器|伪类选择器|属性选择器>元素选择器|伪元素选择器>通配符选择器|子元素选择器|相邻兄弟选择器，即ID选择器的优先级最高。

最近原则：主要是针对继承样式，越靠近格式化的元素的父类样式，优先级越高。如：<div><p>…</p></div>，给<p>标签设置样式，

它的优先级就高于<div>标签样式。

此外，把!important加在样式的后面，可以提升样式的优先级为最高级(高过内联样式)

3.移动端有哪些常见布局方式？

一、固定布局

固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 

其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。

二、流动布局

流动布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同，流动布局就是使用百分比来代替px作为单位。 

优点是流动布局可以很好解决自适应需求。缺点是不够灵活，添加元素时，需要更改其他元素的值。

三、bootstrap布局

bootstrap是一个比较流行的响应式前端框架，利用bootstrap的栅格系统可以实现响应式的移动端布局。

栅格系统：Bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比，

在使用的时候，我们给相应的div设置col-lg-2 col-md-3 col-sm-4 col-xs-6，以此完成布局。

四、媒体查询+REM布局

使用媒体查询可以根据不同的设备宽度加载不同的css样式。rem是一个相对单位，会根据根节点的字体大小来计算的，

使用媒体查询和rem可以实现移动端的响应式。

五、flex布局

Flexbox是CSS3引入的新的布局模式，也称为弹性布局，他会根据页面的剩余宽度自动分配空间。 

它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它能够扩展和收缩 flex 容器内的元素， 以最大限度地填充可用空间。Flexbox布局最适合应用程序的组件和小规模的布局，

而网格布局更适合那些更大规模的布局。

移动端和PC端的区别？

 （1）PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，

   一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。

 （2）在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，

   这样的问题在PC端都是遇不到的。 

 （3）在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是rem布局，感觉很好。

 （4）在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲，

   而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3， 既简单、效率又高。

 （5）一般pc端用jquery，移动端用zepto，因为移动端的流量还是比较重要的， 所以引入的资源或者插件，能小则小，

   一个30k的资源和一个80k的资源，在移动端的差别还是挺大的。

 （6）比如在手机上的300ms的延迟，这在PC端是没有的，如果我们希望做成webapp，那么自然就不需要这300ms的延迟，

   所以可以使用hammer-time.js来移除这300ms的延迟。

4.固定宽度布局开发WebApp如何实现多终端下自适应？

viewport的概念

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。

在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，

它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。

在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，

所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站。

移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），

但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

下图列出了一些设备上浏览器的默认viewport的宽度。

固定宽度多终端自适应，固定宽度布局在移动端遇到的问题

默认viewoort导致横向滚动条

移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），

但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

CSS中的1PX并不等于设备的1PX

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，

那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，

css中的1px所代表的设备物理像素是不同的。

还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；

反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

如何在固定宽度下自适应呢？

meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta>标签是如何控制网页的尺寸和缩放浏览器的说明。

width=device-width部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。

initial-scale=1.0部分设置浏览器首次加载页面时的初始缩放级别。