<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Exam</title>
</head>
<body>
<div id="event" onclick="test()"></div>
</body>
</html>
一、事件流，三种事件流。
事件即用户或浏览器自身执行的某种动作。
1.事件冒泡 IE中的事件流
click事件由近即远 div--body--html--document
冒泡事件.png
2.事件捕获
document--html--body--div
捕获流.png
3.DOM事件流
捕获事件事件到body层就停止了，不会传到div层，然后开始事件冒泡在传回document。
DOM事件流.png
IE9、Opera、Firefox、Chrome和Safari都支持DOM事件流；IE8及更早版本不支持DOM事件流。
二、事件处理程序
即响应某个事件的函数就叫做事件处理程序。事件处理程序的名字以"on"开头。
1.HTML事件处理程序
直接在html中绑定事件
<input type="button" value="Click Me" onclick="alert('Clicked')" />
这样会创建一个封装着元素属性值的函数，该函数中有一个局部变量event，也就是事件对象。
<!--输出 click -->
<input type="button" value="Click Me" onclick="alert(event.type)" />
通过event变量，可以直接访问事件对象，在这个函数内部，this值等于事件的目标元素。
<!--输出 Click Me -->
<input type="button" value="Click Me" onclick="alert(this.value)" />
event 函数内扩展作用域的方式
可以输出value
<input type="button" value="Click Me" onclick="alert(value)" />
<form method="post">
<input type="text" name="username" value="">
<input type="button" onclick="alert(username.value)">
</form>
缺点：
存在一个时差问题。因为用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。
这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。不同JavaScript引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错。
HTML与JavaScript代码紧密耦合。
2.DOM0级事件处理程序
对每个事件只支持一个事件处理程序
var btn = document.getElementById("myBtn");
btn.onclick = function () {
alert(this.id);
}
//删除点击事件
btn.onclick = null;
<input type="button" value="Click Me" onclick="null" />
如果使用HTML指定事件处理程序，将相应的属性值设置为null，也可以删除以这种方式指定的事件处理程序。
3.DOM2级事件处理程序
“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数：
- 1 事件名，
- 2 事件处理程序，
- 3 一个布尔值（true,表示在捕获阶段调用时间处理程序，false,表示在冒泡阶段调用时间处理程序）
btn.addEventListener("click",function () {
alert(this.id);
},false)
btn.addEventListener("click",function () {
alert("hello World");
},false)
优点：使用DOM2可以添加多个事件处理程序，按添加方法的顺序执行。
移除点击事件，需要将定义的事件提出来，移除的事件和添加的事件应为同一个事件。
function handle() {
alert(this.id);
}
btn.addEventListener("click",handle,false)
btn.removeEventListener("click",handle,false)
大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序。
4.IE事件处理程序
IE中实现了与DOM中类似的方法，attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于IE8及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都被添加到冒泡阶段。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
alert(this==window);//true
})
在IE中使用attachEvent()和在DOM0级方法的主要区别
在于事件处理程序的作用域。attachEvent()的事件处理程序在全局中作用域运行，在DOM0级方法的情况下，事件处理程序是局部的。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
alert(this==window);//true
})
btn.attachEvent("onclick",function(){
alert("Hello World");
})
//与DOM方法不同的事，IE中不是按添加方法的顺序执行，而是相反的执行，先输出Hello World,在输出true
attachEvent()添加的方法可以用detachEvent()方法移除，条件是必须提供相同的参数，与DOM方法一致，不能删除匿名函数。
支持IE事件处理程序的浏览器只有IE和Opera。
5.跨浏览器的事件处理程序
三、事件对象
1.DOM的事件处理对象
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。
var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
alert("点我");
}
event属性2.png
event属性.png
只有在事件处理程序执行期间，event对象会存在，一旦时间处理程序执行完，event对象就会被销毁。
2.IE中的事件对象
使用DOM0级方法添加事件处理程序时，event对象作为window对象的属性存在。
使用attachEvent()添加的，就会有一个event对象作为参数被传入事件处理函数。
3.跨浏览器的事件对象
四、事件类型
- UI（User Interface，用户界面）事件，当用户与页面上的元素交互时触发；
- 焦点事件，当元素获得或失去焦点时触发；
- 鼠标事件，当用户通过鼠标在页面上执行操作时触发；
- 滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
- 文本事件，当在文档中输入文本时触发；
- 键盘事件，当用户通过键盘在页面上执行操作时触发；
- 合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；
- 变动（mutation）事件，当底层DOM结构发生变化时触发。
1.UI事件 - load: 当页面完全加载后在window上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载完毕时在<img>元素上面触发，或者当嵌入的内容加载完毕时在<object>元素上面触发。
- unload：当页面完全卸载后在window上面触发，当所有框架都卸载后在框架集上面触发，或者当嵌入的内容卸载完毕后在<object>元素上面触发。
- abort：在用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上面触发。
- error：当发生JavaScript错误时在window上面触发，当无法加载图像时在<img>元素上面触发，当无法加载嵌入内容时在<object>元素上面触发，或者当有一或多个框架无法加载时在框架集上面触发。
- select：当用户选择文本框（<input>或<tex-terea>）中的一或多个字符时触发。
- resize：当窗口或框架的大小变化时在window或框架上面触发。
- scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发。<body>元素中包含所加载页面的滚动条。
//load 事件 两种添加方式，EventUtil为跨浏览器的事件对象。
在body元素上加onload="alert('hello')"事件，
EventUtil.addHandler(window, "load", function(event){
alert("Loaded!");
});
//unload 事件，用户从一个页面切换到另一个页面触发。
在body元素上加onunload="alert('hello')"事件，
EventUtil.addHandler(window, "unload", function(event){
alert("Loaded!");
});
//resize事件，当浏览器被调整到一个新的高度或宽度时，会触发。
EventUtil.addHandler(window, "resize", function(event){
var event = EventUtil.getEvent(event);
var pageX = event.pageX;
var pageY = event.pageY;
});
//scroll 事件
EventUtil.addHandler(window, "scroll", function(event){
alert("Loaded!");
});
2.焦点事件
- blur：在元素获得焦点时触发。这个事件不会冒泡，所有浏览器都支持。
- focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
3.鼠标事件和滚轮事件
DOM3级事件中定义了9个鼠标事件：
- click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。这一点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
- dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。从技术上说，这个事件并不是DOM2级事件规范中规定的，但鉴于它得到了广泛支持，所以DOM3级事件将其纳入了标准。
- mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
- mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件，但DOM3级事件将它纳入了规范。IE、Firefox9+和Opera支持这个事件。
- mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件，但DOM3级事件将它纳入了规范。IE、Firefox9+和Opera支持这个事件。
- mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。
- mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。
- mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
- mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。
mouseleave，mouseenter不能冒泡
IE9之后的执行顺序，IE8及之前会跳过第二个mousedown和click事件
(1) mousedown
(2) mouseup
(3) click
(4) mousedown
(5) mouseup
(6) click
(7) dblclick
- 键盘与文本事件
- keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
- keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。按下Esc键也会触发这个事件。Safari 3.1之前的版本也会在用户按下非字符键时触发keypress事件。
- keyup：当用户释放键盘上的键时触发。
5.复合事件
IE9+支持。
6.变动事件
DOM2级的变动（mutation）事件能在DOM中的某一部分发生变化时给出提示。
- DOMSubtreeModified：在DOM结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发
- DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发
- DOMNodeRemoved：在节点从其父节点中被移除时触发。
- DOMNodeInsertedIntoDocument：在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在DOMNodeInserted之后触发
- DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。
- DOMAttrModified：在特性被修改之后触发。
- DOMCharacterDataModified：在文本节点的值发生变化时触发。
7.HTML5事件
- contextmenu事件
EventUtil.addHandler(window, "contextmenu", function(event){
var event = EventUtil.getEvent(event);
event.preventDefault();//禁用鼠标默认事件，比如右击
});
- beforeunload事件
//需要鼠标触发window对象，即事件的对象。
EventUtil.addHandler(window, "beforeunload", function(event){
var event = EventUtil.getEvent(event);
var msg = "你确定要离开吗？";
event.returnValue = msg; //事件的返回信息是给用户的提示信息。
return msg;
});
- DOMContentLoaded事件
如前所述，window的load事件会在页面中的一切都加载完毕时触发，但这个过程可能会因为要加载的外部资源过多而颇费周折。而DOMCon-tentLoaded事件则在形成完整的DOM树之后就会触发，不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕。 - readystatechange事件
提供与文档或元素的加载状态有关的信息 - pageshow和pagehide事件
第一个事件就是pageshow，这个事件在页面显示时触发，无论该页面是否来自bfcache。在重新加载的页面中，pageshow会在load事件触发后触发；而对于bfcache中的页面，pageshow会在页面状态完全恢复的那一刻触发。另外要注意的是，虽然这个事件的目标是document，但必须将其事件处理程序添加到window。 - hashchange事件
监听URL参数列表变化
8.设备事件
9.触摸与手势事件
五、内存与性能
在javascript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。
原因：
每个函数都是对象，都会占用内存。
内存的对象越多，性能就越差。
事件委托
事件委托利用了事件冒泡，只指定一个事件，就能管理某一类型的所有事件。
var btn = document.getElementById("myBtn");
var handler = function(event){
switch(event.type){
case "click":
alert("Clicked");
break;
case "mouseover":
event.target.style.backgroundColor = "red";
break;
case "mouseout":
event.target.style.backgroundColor = "";
break;
}
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
在使用事件时，需要考虑如下一些内存与性能方面的问题。
- 有必要限制一个页面中事件处理程序的数量，数量太多会导致占用大量内存，而且会让用户感觉页面反应不够灵敏。
- 建立在事件冒泡机制之上的事件委托技术，可以有效减少事件处理程序的数量。
- 建议在浏览器卸载页面之前移除页面中的所有事件处理程序。
网友评论