JavaScript 学习笔记9

第十三章

1.事件流

JavaScript和html的交互经过事件来实现

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。

DOM2事件流：事件捕获阶段——>处于目标阶段——>事件冒泡阶段

                         事件捕获：不太具体的节点应该更早的收受事件，用意在于事件到达预约元素以前捕获它。

                         处于目标阶段：节点接收到事件并处理

                         事件冒泡阶段：由最具体的元素接受，逐级向上传播

2.事件处理程序：响应某个事件的函数

事件处理程序的名字以“on”开头

a.HTML事件处理程序

经过和相应事件处理程序同名的HTML特性来指定。

问题——时差问题，经常使用try-catch封装解决

                扩展做用域链在不一样浏览器会致使不一样结果

               HTML和JavaScript代码紧密耦合

b.DOM0级事件处理程序

讲一个函数赋值给一个事件处理程序属性

这时候的事件处理程序是在元素的做用域中运行，程序中的this引用当前元素

btn.onclick=null； //删除事件处理程序

c.DOM2级事件处理程序

制定和删除事件处理程序向的操做：addEventListener（）和removeEventListener（）

参数：要处理的事件名，做为事件处理程序的函数click，布尔值（FALSE——在冒泡阶段调用）

好处：能够添加多个事件处理程序，按照添加顺序触发

d.IE事件处理程序

attachEvent（），detachEvent（），参数：事件处理程序名称onclick，事件处理程序函数

事件处理程序会在全局做用域中运行

好处：能够添加多个事件处理程序，按照相反的顺序触发

f.使用能力检测的跨浏览器的事件处理程序

3.事件对象

在触发DOM上的某个事件时会产生一个事件对象event，这个对象包含全部与事件有关的信息

a.DOM中的事件对象

不管DOM0orDOM2，都会闯入event对象

在对象内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标

1）须要一个函数处理多个事件时，但是使用swich（event.type）——case

2）preventDefault（）——阻止特定事件的默认行为

3）stopPropagation（）——用于当即中止事件在DOM层次的传播，取消进一步的事件冒泡或捕获

4.)eventPhase属性，用于肯定事件阶段：1.捕获阶段2.处于目标3.事件冒泡

b.IE中的事件对象

DOM0方式添加事件，event对象做为window对象的一个属性存在

使用attachEvent（）添加，就会有一个event对象做为参数被传入事件处理程序中

经过HTML特性指定的事件，能够经过一个event变量来访问event对象

属性/方法：cancelBubble——true，取消事件冒泡

                     returnValue——设置为FALSE，取消事件的默认行为

                   srcElement——事件的目标

                    type——事件的类型

4.事件类型

a.UI事件

指不必定与用户操做有关的事件

load 和 unload ：当页面彻底加载/卸载后再window上触发

.                              两种定义onload事件处理程序的方式

                                 ——a.EventUtil.addHandle(window，“load”，function（）{})；

                                         b.为body元素添加一个onload特性

resize：当浏览器窗口被调整到一个新的高度或宽度时触发，在window上触发

scroll：在window对象上发生，实际表示的是页面中相应元素的变化

b.焦点事件:在页面元素得到或失去焦点时触发

blur/focus:在元素失去/得到焦点时触发。不会冒泡，全部浏览器都支持

IE:focusin,focusout,被DOM3级事件采纳为标准方式

c.鼠标和滚轮事件

mousedown，mouseup，click，dblclick，mouseover，mouseout

客户区坐标位置：clientX和clientY

页面坐标位置：知道鼠标是在视口的什么位置发生的，pageX和pageY

屏幕坐标位置：screenX，screenY，鼠标指针相对于整个屏幕的坐标信息

d.修改键

DOM规定了4个属性，表示修改键的状态，shiftKey，ctrlKey，altKey，metaKey，属性包含布尔值，true表示按下

e.相关元素

mouseover（移入），mouseout（移出）

f.鼠标按钮

对mousedown和mouseup，其event对象存在一个button属性，三个值：0——主鼠标1——滚轮按钮

2——次鼠标按钮

g.更多的事件信息

DOM2：event对象还提供了detail属性，用于给出有关事件的更多信息，detail包含一个数值，表示在给定位置发生了多少次单击

h.滚轮事件——mousewheel

4.4键盘和文本事件

键盘事件：keydown/keyup：当用户按下/释放键盘上任意键触发

                keypress：当用户按下键盘上的字符键触发， 

文本事件：textInput——在可编辑区域输入文本时触发 ，它的event对象还包含一个data属性和inputMethod属性

键码：event对象的keyCode属性中会包含一个代码，与键盘上一个特定的见相对应

字符编码：event对象都支持一个charCode属性

4.6变更事件

在DOM中的某一部分发生变化时给出提示

a删除节点

首先会触发DOMNodeRemoved事件，这个事件的目标（event.target）是被删除的节点，event.relatedNode属性包含着对目标节点父节点的引用

若是被移除的节点包含子节点，那么在其全部子节点以及这个被移除的节点上回相继触发DOMNodeRemovedFromDocument事件

其后，DOMSubtreeModified事件——在DOM结构中发生任何变化时触发，event.target为被移除节点的父节点

b插入节点

首先触发DOMNodeInserted事件，接着DOMNodeInsertedIntoDocument，最后，SOMSubtreeModified

4.7HTML5事件

1.contextmenu，即经过单击鼠标右键能够调出上下文菜单

事件目标是发生用户操做的元素，在全部浏览器中又能够取消这个事件：

兼容DOM的浏览器：event.preventDefault（），IE：event.returnValue值设置为false