008JS-event事件和css脚本化

1.Event

事件本身并不是一个需要定义的技术名词，简单的说，事件就是web浏览器通知应用程序发生了什么事情。
事件类型是指一个用来说明发生什么类型事件的字符串，比如mouseover表示用户移动鼠标；事件目标是发生的事件或与之相关的元素 对象，例如<button>元素的click事件；事件处理程序(事件监听程序)是在相关元素事件触发后，用以处理或相应事件的函数；事件对象是指与特定事件相关且包含有关事件详细信息的对象，通常是指事件处理程序的参数e;事件传播是指浏览器决定哪个对象触发其事件处理程序的过程，事件传播的另一种方式是事件捕获，在容器元素上注册的特定处理程序有机会在事件传播到真正目标前进行拦截捕获。
需要说明的是有些事件，浏览器为其添加了默认的操作，例如超链接的点击事件，点击后会自动跳转到新页面。

1.1 常见事件类型

// 表单事件
form元素的submit和reset事件,提交事件和重置表单;
按钮类元素的click事件，点击;
文字输入、选择选项、选择复选框等，触发change事件;
通过键盘焦点改变触发focus和blur事件,不会冒泡，其他表单事件会冒泡;

// window事件
load事件，当文档完全加载并显示给用户时会触发;
unload事件，离开当前文档转向其他文档时触发;
beforeunload与unload类似，但是会询问用户是否确定离开当前页面的机会;
onerror属性，当JavaScript出错时触发，但不是真正的事件处理程序，因为其能用不同的参数调用;
如img等当个文档元素也可以添加load和error事件初测处理程序;
focus和blur事件，当浏览器窗口从操作系统中得到或失去键盘焦点时触发;
resize和scroll事件，用户调整浏览器大小或滚动时触发，scroll事件也可在任何可滚动的元素上触发;

// 鼠标事件
传递给鼠标事件处理程序的事件对象有属性集，描述了当事前发生是鼠标的位置和按键状态，
如clientX和clientY为鼠标事件触发时的鼠标位置，button和which属性指定按下的鼠标键是哪个;
当键盘辅助键按下时，altkey/ctrlkey/metakey/shiftkey对应属性会为true;
detail属性表示click事件是单击、双击或三击。
mousemove事件，在用户每次移动或拖动鼠标时触发;
mousedown事件，在用户点击鼠标时触发；
mouseup事件，在用户放开鼠标时触发，在mousedown和mouseup事件队列后依旧会执行click事件；
dbclick事件，鼠标极短时间内双击触发；
contextmeau事件，在右击鼠标时触发，会有默认的事件处理函数；
mouseover和mouseout事件，经过或离开某个元素时触发，需要检查鼠标是否真正的离开目标元素还是其内子元素之间切换冒泡导致的事件触发；
mousewhell事件，DOMMouseScroll事件(火狐)，鼠标滚轮时触发，wheelDelta滚动了多远和方向（默认120）和detail(火狐)属性；
鼠标相关事件均有事件冒泡行为，e.target是当前触发事件的元素，e.currentTarget是事件绑定元素。

// 键盘事件
keydown事件，键盘按下任意键触发；
keyup事件，键盘放开任意键触发；
keypress事件，在keydown和keyup事件中间触发；
键盘事件也有ctrlkey,shiftkey,altkey,metakey,描述键盘辅助键；
keycode属性描述按下或放开的是那个键

// DOM事件
focusin和focusout事件相当于focus和blur事件，不冒泡；
mouseenter和mouseleave事件相当于mouseover和mouseout事件，不冒泡；

// H5事件
1.audio和video元素的触发各种网络事件、数据缓冲状况和播放状态的通知事件；
例如：canplay,canplaythrough,durationchange,emptied,enden,loadeddata,loadedmetadata,
loadstart,pause,play,playing,progress,ratechange,seeked,seeking,stalled,timeupdate,volumechage,waiting
2.允许js应用参与基于操作系统的拖拽操作；
例如：dragstart,dragenter,drop,drap,dragover,dragend,dragleave
3.表单invalid事件，在验证失败时触发；
4.离线web应用支持；
例如：cached,noudate,checking,obsolete,downloading,progress,error,undateready

// 触摸屏或移动设备事件
touchstart事件，设置触摸屏幕时；
touchmove事件，手指移动式触发;
touchend事件，手指离开屏幕触发，触摸事件并不告诉触摸的坐标，通过changedTouches属性类数组，位置；
orientationchanged事件，竖屏转横屏时触发；

1.2 事件处理程序的注册和注销

// 方式1，设置事件目标的属性，也就是on加事件名,
//缺点是并不是所有的事件都能用这种方式添加，且同元素同事件多次添加，后面的会覆盖前面的，也就是每个事件最多有一个事件处理程序
el.onclick = () =>{};

// 因为客户端编程的通用风格是保持HTML内容和js代码行为分离，所以应该避免使用HTML事件处理程序属性，也就是事件处理函数写在HTML代码行间。，这里也就不过多介绍。

// 方式三：通过addEventListener和removeEventListener函数，优点是可为一个元素的同一事件设置多个事件处理函数，并不会覆盖，执行顺顺序与事件添加顺序一致
el.addEventListener('事件名',事件处理函数，{
	capture:false, // 事件捕获，默认false
	once:false, // 事件每次触发都是新的，默认false
	passive:false
}); // 第三个参数对象也可是一个布尔值，表示设置事件捕获
el.removeEventListener(); // 参数与addEventListener函数大致一样
// IE5-IE8,不支持addEventListener和removeEventListener函数，而是使用attachEvent和datachEvent函数

1.3 事件处理程序

函数的参数e表示事件的相关信息，例如鼠标mouseover事件的e对象的鼠标位置信息等，需要注意的是IE8之前没有，需要通过window.event进行获取。
在事件处理程序中，this指向当前事件，es6之后的箭头函数参考前面的文章。
事件处理程序的返回值，若是false就是告诉浏览器不要执行这个事件相关的默认操作，例如表单提交事件处理函数返回false，就是表示阻止浏览器提交表单操作，需要注意的是在使用addEventListener方式添加的事件，必须使用e.preventDefault()方法或者设置事件对象的returnValue属性的方式进行阻止浏览器的默认行为，IE9之前用e.returnValue阻止。
事件传播也叫事件冒泡行为，也就是子元素会触发父元素的相同事件，从内到外进行触发，用户可以在事件处理程序中阻止事件冒泡行为，即e.stopProphation()方法或e.cancelBubble属性设置；前面也说到了使用addEventListener方法添加事件时，可设置事件捕获，即与事件冒泡的触发顺序相反，即从触发事件的元素的最外层父元素先进行触发；使用事件捕获这个特点实现事件委托，在js代码中动态添加的元素最好使用事件委托机制添加事件，结合e.target判断是否为要添加事件的子元素，这就是事件委托机制，即给父元素添加事件影响子级元素。

2. css脚本化

CSS样式给HTML文档视觉上添加了显示效果，但是客户端js程序开发者还是对css样式脚本化编程比较感兴趣，通过标本画编程能够动态的添加一些视觉效果，从而增强了与用户的交互性体验。

2.1 重要的css属性

position; // 指定元素的定位类型，static，absolute，fixed,relative
top,left; // 指定元素上左边缘位置
bottom,right; // 指定元素下右边缘位置
width,height; // 元素尺寸
z-index; // 元素第三个维度,只对兄弟元素
display; // 指定元素师傅 以及如何显示
visibility； // 指定元素是否可见
clip; // 定义元素的裁减区域，之心是元素在区域内的部分
overflow； // 指定元素比分配的空间要大时的处理方式
margin,border,padding; // 指定元素的空白和边框
background； // 指定元素的背景颜色和图片
opacity; // 元素透明
text-shadow; // 文本阴影
transform；
animation；
transition；

2.2 脚本化内联样式

脚本化css最直截了当的方法就是更改单独的文档元素的style属性，大多数HTML属性都是，style也是元素对象的属性，但style属性的值不是一个字符串，而是一个CSSStyleDeclaration对象，对象属性值就是css样式属性。需要注意的连字符，改成小驼峰，例如font-size改成fontSize。style的所有属性值都是字符串。
脚本化css最常见的用途之一就是产生动画效果。

2.3 获取计算出的样式

el.getComputedStyle().attr;
// 方法返回的是是CSSStyleDeclaration对象，表示应用子指定元素谁给你的所有样式，
// 计算样式的属性是只读的，绝对值，不计算符合属性(margin不能查，marginLeft可以)，cssText属性未定义

// IE9之前不吃getComputedStyle方法，可是使用currentStyle属性。

脚本化css类

前面讲了js代码一致直接操作元素的样式属性值，但是这往往给程序的可维护性带来了很大的挑战。
通常情况下元素的脚本化样式是通过css类的样式实现的。

el.classList; // 获取当前元素所有类属性，返回一个只读的类数组对象
el.classList.add('className'); // 添加类属性
el.classList.remove('className'); // 删除类属性
el.classList.toggle('className'); // 切换类属性，有属性时删除，没有时添加
el.classList.contains('className'); // 检查类属性存在性

// el.styleSheets属性时一个只读的类数组对象，包含CSSStyleSheet对象，表示与文档关联在一起的样式表，
// CSSStyleSheet对象有一个cssRules[]数组，表示样式表所有规则，IE中叫rules
// cssRule对象通过selectText方法查询规则，通过insertRule方法添加规则，通过deleteRule方法删除规则，IE中用addRule和removeRule方法添加和删除规则
el.styleSheets[0].insertRule("H1 {text-weight:bold;}",0);

3. Next

面向对象，继承，组件开发