2019-09-28

学习JavaScript13章

java与HTML的交互是通过事件实现的

1事件流

事件流描述的是从页面中接收事件的顺序。

1.1事件冒泡

事件开始由最内部的元素接收
例：

 提示

若

元素被点击，则事件顺序传播为a --> div --> body

1.2事件捕获

是指事件开始由最外部的元素接收，然后由最内部的元素接收
例：

 提示

若

元素被点击，则事件顺序传播为body--> div --> a

1.3DOM事件流

DOM事件流包括三个阶段。

事件捕获阶段

处于目标阶段

事件冒泡阶段

  
  


  Click Me

若

元素被点击，则事件顺序传播为html-->body-->button
-->body-->html

2事件处理系统

2.1HTML事件处理系统

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的 HTML 特性来指定。这个 特性的值应该是能 够执行的 JavaScript代码。
例：

2.2 DOM0级事件处理程序

每个元素（包括 window 和 document）都有自己的事件处理程序属性，这些属性通常全部小写， 例如 onclick。将 这种属性的值设置为一个函数，就可以指定事件处理程序

var btn =document.getElementById("myBtn"); btn.onclick = function(){     alert("Clicked") }

2.3 DOM2级事件处理程序

DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：
addEventListener()和 removeEventListener()
处理指定事件：

btn.addEventListener("click",function(){ },false); 

三个参数：事件名，函数，布尔值，若为false即表示在冒泡阶段处理，true在捕获阶段 移除上述添加的事件：

btn.removeEventListener() 

三个参数必须与add的完全一致才能移除，若在add中定义匿名函数则永远不能被移除

2.4 IE事件处理程序

IE实现了与 DOM中类似的两个方法：
attachEvent()和 detachEvent()。
这两个方法接受相同 的两个参数：事件处理 程序名称与事件处理程序函数。

2.5 跨浏览器的事件处理程序

第一个要创建的方法是** addHandler()**，它的职责是视情况分别使用 DOM0 级方法、DOM2 级方 法或 IE方法来添加 事件。这个方法属于一个名叫 EventUtil 的对象，本书将使用这个对象来处理浏览 器间的差异。addHandler()方法接 受 3个参数：要操作的元素、事件名称和事件处理程序函数。
与 addHandler()对应的方法是 removeHandler()，它也接受相同的参数。这个方法的职责是移 除之前添加的事件处 理程序。

3 事件对象

3.1 DOM中的事件对象

兼容 DOM的浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用什 么方法（DOM0级 或 DOM2级），都会传入 event 对象 。
在事件处理程序内部，对象 this 始终等于 currentTarget 的值，而 target 则只包含事件的实 际目标。如果直接将事 件处理程序指定给了目标元素，则 this、currentTarget 和 target 包含相同 的值。
在需要通过一个函数处理多个事件时，可以使用 type 属性 要阻止特定事件的默认行为，可以使用 preventDefault()方法

3.2 IE中的事件对象

与访问 DOM中的 event 对象不同，要访问 IE中的 event 对象有几种不同的方式，取决于指定事 件处理程序的方 法。在使用 DOM0级方法添加事件处理程序时，event 对象作为 window 对象的一个属性存在。
IE的 event 对象同样也包含与创建它的事件相关的属性和方法。其中很多属性和方法都有对应的 或者相关的 DOM属 性和方法。与 DOM的 event 对象一样，这些属性和方法也会因为事件类型的不同 而不同，但所有事件对象都会包含 下表所列的属性和方法。

3.3 跨浏览器的事件对象

而在 IE中，event 参数是未定义 的（undefined）， 因此就会返回 window.event。将这一行代码添加到事件处理程序的开头，就可以确 保随时都能使用 event 对象，而 不必担心用户使用的是什么浏览器。

第二个方法是 getTarget()，它返回事件的目标。在这个方法内部，会检测 event 对象的 target 属性，如果存在则返 回该属性的值；否则，返回 srcElement 属性的值
第三个方法是 preventDefault()，用于取消事件的默认行为。在传入 event 对象后，这个方法 会检查是否存在 preventDefault()方法，如果存在则调用该方法。如果 preventDefault()方法不 存在，则将 returnValue 设置为 false。
第四个方法是 stopPropagation()，其实现方式类似。首先尝试使用 DOM方法阻止事件流，否 则就使用 cancelBubble 属性。

4 事件类型

Web 浏览器中可能发生的事件有很多类型。如前所述，不同的事件类型具有不同的信息，而“DOM3 级事件”规定了 以下几类事件。
UI（User Interface，用户界面）事件:当用户与页面上的元素交互时触发；
焦点事件
当元素获得或失去焦点时触发；
鼠标事件
当用户通过鼠标在页面上执行操作时触发；
滚轮事件
当使用鼠标滚轮（或类似设备）时触发；
文本事件
当在文档中输入文本时触发；
键盘事件
当用户通过键盘在页面上执行操作时触发；
合成事件
当为 IME（Input Method Editor，输入法编辑器）输入字符时触发；
变动（mutation）事件
当底层 DOM结构发生变化时触发。 变动名称事件，当元素或属性名变动时触发。此类事件已经被废弃，没有任何浏览器实现它们， 因此本章不做 介绍。

5. 内存和性能

5.1 事件委托

即把事件直接弄到一个比较高的节点上，统一管理某一类型的所有事件，而不是每个小事件都添加 事件处理程序，用target=EventUtil.getTarget(event)获取事件目标，然后用target.id获取具体的哪 一个节点执行什么事件

5.2 移除事件处理程序

在onunload事件处理程序中移除所有已添加的事件处理程序，设置其为null即可，如 btn.onclick=null

6. 模拟事件

6.1 DOM事件模拟

在document对象用creatEvent方法创建event对象，接受一个参数，表示是什么类型的事件，有以 下几个可接受参数：
UIEvents：UI事件
MouseEvents：鼠标事件
MutationEvents：DOM变动事件 HTMLEvents：HTML事件

1. 模拟鼠标事件 创建鼠标事件须指定必要信息 返回的对象有initMouseEvent()方法，接受15个参数： >type：事件类型

bubbles：事件是否冒泡
cancelable：是否可以取消
view：与事件关联的视图
detail：0
screenX：相对于屏幕X坐标 Y：Y坐标
clientX：相对于视口X Y
ctrlKey：是否按下Ctrl，默认false altKey：false shift：false metaKey：是否按下Meta，默认false >button：表示按下哪一个鼠标键，默认为0 >relatedTarget：表示与事件相关对象 用这个初始化后的对象传给dispatchEvent方法，就会自动触发 ####2. 模拟键盘事件 createEvent(“KeyboardEvent”)创建键盘事件，返回对象包含initKeyEvent()方法，接受10个参
数
type：事件类型
bubbles：是否冒泡
cancelable：是否可以取消
view：与事件关联视图
ctrlKey：是否按下ctrl
altKey：按下alt
shiftKey：按下shift
metaKey：按下meta
keyCode：键码
charCode：ascii编码 将初始化后对象传入dispatchEvent即可

3. 模拟其他事件

也是用creatEvent方法，传入事件类型名即可

4. 自定义DOM事件

类型名为CustomEvent，返回对象有initCustomEvent方法，四个参数

type：事件类型
bubbles：同上
cancelable：同上
detail：任意值，保存在event对象的detail属性中

6.2 IE的模拟事件

调用document.creatEventObject()方法创建event对象，不接受参数，要手动添加必要信息，最后 调用fireEvent方法，会自动为event对象添加srcElement和type属性