一、事件流
1.1 事件流
事件流：从页面中接受事件的顺序
事件冒泡：即事件开始时由最具体的元素(文档中嵌套层次最深 的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)
事件捕获：事件捕获的思想 是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在 事件到达预定目标之前捕获它。
DOM事件流：规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首 先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶 段，可以在这个阶段对事件做出响应。
在 DOM 事件流中，实际的目标(<div>元素)在捕获阶段不会接收到事件。这意味着在捕获阶段， 12 事件从 document 到<html>再到<body>后就停止了。下一个阶段是“处于目标”阶段，于是事件在<div> 上发生，并在事件处理(后面将会讨论这个概念)中被看成冒泡阶段的一部分。然后，冒泡阶段发生， 事件又传播回文档
二、事件处理程序
事件：用户和浏览器执行的操作
事件处理程序：响应时间的函数
方法：
1.直接在HTML标签中给同名的事件处理程序赋值相应的JS代码（html事件处理程序）
<button onclick="this.innerHTML = 饭饭'">按钮一</button>
this：引用，此时代表的元素节点
不能移除事件
2、在HTML标签中给同名的时间处理程序赋值相应的函数调用（html事件处理程序）
<button onclick="func2(this)">按钮二</button>
this在标签中代表的是当前这个标签节点
一般认为此类事件不能移除
应用
function func2(obj) {//obj = this;
console.log("事件二");
//注意：在函数中this代表的是window
console.log(this);
console.log(obj);
}
3.获取相应的元素节点将函数赋值给事件处理程序（DOM0级事件处理程序）
<button id="but3">按钮三</button>
在事件函数中this代表的是当前这个标签节点
事件可以移除：元素节点.事件处理程序 = null;
var jsBut3 = document.getElementById("but3");
jsBut3.onclick = func3;
function func3() {
console.log("fanfanis a good girl");
console.log(this);
}
此时如果添加事件会覆盖上一个事件
4.添加事件的监听（DOM2级事件处理程序）
“DOM2 级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作:addEventListener() 和 removeEventListener()
元素节点.addEventListener(参数1, 参数2, 参数3);
参数1：事件名
参数2：响应事件的函数
参数3：事件流 一般情况下为false（最后这个布尔值参数如果是 true，表示在捕获 阶段调用事件处理程序;如果是 false，表示在冒泡阶段调用事件处理程序）
removeEventListener()移除事件时，第二个参数与传入addEventListener()中的相同
//无效
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);}, false);
//这里省略了其他代码
btn.removeEventListener("click", function(){ //没有用! alert(this.id);
}, false);
// 有效
var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);
//这里省略了其他代码
btn.removeEventListener("click", handler, false); //有效!
事件监听可以添加多个事件处理程序，多个事件相互之间互不影响。
jsBut4.addEventListener("click", func4, false);
function func4() {
console.log("fanfanis a good girl");
//事件函数中this代表的是当前元素节点
console.log(this);
}
//可以添加多个事件处理程序，多个事件相互不影响
jsBut4.addEventListener("click", func5, false);
function func5() {
console.log("Yes, you are very right!");
}
总结一下this在四中方法中用法
this
1、HTML标签中代表当前元素节点
2、HTML标签中代表当前元素节点，在函数中代表的window全局对象，在标签中将this当做实参传递给函数，那么在函数中形参就代表了当前元素节点。
3、事件函数中this代表当前元素节点
4、事件函数中this代表当前元素节点
三、事件对象
在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的 3 信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如，鼠标操作导致的事件 对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有 浏览器都支持 event 对象，但支持方式不同
<input type="button" value="Click Me" onclick="alert(event.type)"/>
event 对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方
法也不一样。不过，所有事件都会有下表列出的成员
bubbles:表明事件是否冒泡
cancelable:表明是否可以取消事件的默认行为
currentTarget:其事件处理程序当前正在处理事件的那个元素
defaultPrevented:为 true 表 示 已 经 调 用 了 preventDefault() (DOM3级事件中新增)
detail:与事件相关的细节信息
eventPhase:调用事件处理程序的阶段:1表示捕获阶段，2表示“处于目标”，3表示冒泡阶段
preventDefault():取消事件的默认行为。如果cancelable是true，则可以使用这个方法
stopImmediatePropagation():取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用(DOM3级事件中新增)
stopPropagation():取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法
target:事件的目标
trusted:为true表示事件是浏览器生成的。为false表 示事件是由开发人员通过JavaScript创建的
(DOM3级事件中新增
type:被触发的事件的类型
view:与事件关联的抽象视图。等同于发生事件的 window对象
在事件处理程序内部，对象 this 始终等于 currentTarget 的值，而 target 则只包含事件的实 际目标。如果直接将事件处理程序指定给了目标元素，则 this、currentTarget 和 target 包含相同 的值。
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert(event.currentTarget === this);
alert(event.target === this);
};
四、事件类型
unload卸载事件
在页面完全卸载之后触发的卸载事件
window.onunload = function() {
函数体;
};
load加载事件
当页面完全加载后(包括所有图像、JavaScript 文件、 CSS 文件等外部资源)，就会触发 window 上面的 load 事件。
window.onload = function() {
函数体;
}
// 图片加载完毕后给出提示
EventUtil.addHandler(window, "load", function(){
var image = document.createElement("img");
EventUtil.addHandler(image, "load", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
document.body.appendChild(image);
image.src = "smile.gif";
});
// 与图像不同，只有在设置了<script>元素的 src 属性并将该元素添加到文档后，才会开始下 载 JavaScript 文件。换句话说，对于<script>元素而言，指定 src 属性和指定事件处理程序的先后顺 序就不重要了。
EventUtil.addHandler(window, "load", function(){
var script = document.createElement("script");
EventUtil.addHandler(script, "load", function(event){
alert("Loaded");
});
script.src = "example.js";
document.body.appendChild(script);
});
//
EventUtil.addHandler(window, "load", function(){
var link = document.createElement("link");
link.type = "text/css";
link.rel= "stylesheet";
EventUtil.addHandler(link, "load", function(event){
alert("css loaded");
});
link.href = "example.css";
document.getElementsByTagName("head")[0].appendChild(link);
});
scroll滚动事件
当鼠标滚动时触发滚动事件
window.onscroll = function(){
//滚动高度
var h = document.documentElement.scrollTop || document.body.scrollTop;
};
resize窗口变化事件
当浏览器窗口被调整到一个新的高度或宽度时，就会触发 resize 事件。这个事件在 window(窗 口)上面触发，因此可以通过 JavaScript 或者<body>元素中的 onresize 特性来指定事件处理程序
window.onresize = function() {
//获取窗口宽度
var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
//获取窗口高度
var h = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
};
焦点事件
焦点事件一般发生在输入框
var jsInput = document.getElementById("put");//获取元素节点
//用第四种事件处理程序，给jsInput添加聚焦事件
jsInput.addEventListener("focus", function(){
函数体;
}, false);
//用第四种事件处理程序，给jsInput添加离焦事件
jsInput.addEventListener("blur", function(){
函数体
}, false);
其他焦点事件：
blur：在元素失去焦点时触发。这个事件不会冒泡;所有浏览器都支持它。
DOMFocusIn:在元素获得焦点时触发。这个事件与 HTML 事件 focus 等价，但它冒泡。只有
Opera 支持这个事件。DOM3 级事件废弃了 DOMFocusIn，选择了 focusin。
DOMFocusOut:在元素失去焦点时触发。这个事件是 HTML 事件 blur 的通用版本。只有 Opera
支持这个事件。DOM3 级事件废弃了 DOMFocusOut，选择了 focusout
focus:在元素获得焦点时触发。这个事件不会冒泡;所有浏览器都支持它
focusin:在元素获得焦点时触发。这个事件与 HTML 事件 focus 等价，但它冒泡。支持这个
事件的浏览器有 IE5.5+、Safari 5.1+、Opera 11.5+和 Chrome。
focusout:在元素失去焦点时触发。这个事件是 HTML 事件 blur 的通用版本。支持这个事件
的浏览器有 IE5.5+、Safari 5.1+、Opera 11.5+和 Chrome。
其中，blur、DOMFocusOut和focusout的事件目标是失去焦点的元素;而focus、DOMFocusIn
和 focusin 的事件目标是获得焦点的元素。
要确定浏览器是否支持这些事件，可以使用如下代码:
var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");
鼠标单击事件
鼠标单击时发生
jsDiv.addEventListener("click", funcOnceClick, false);
function funcOnceClick() {
函数体;
}
鼠标双击时发生
jsDiv.addEventListener("dblclick", funcDblClick, false);
function funcDblClick() {
函数体;
}
mouseover鼠标移入事件
当鼠标移入时触发
var jsDiv = document.getElementById("box");
jsDiv.onmouseover = function() {
this.style.backgroundColor = "green";
};
mouseout鼠标移出事件
当鼠标移出时触发
var jsDiv = document.getElementById("box");
jsDiv.onmouseout = function() {
this.style.backgroundColor = "green";
};
mousedown鼠标按下事件
当鼠标按下时触发
jsDiv.onmousedown = function() {
this.style.width = this.offsetWidth * 2 + "px";
};
mousedup鼠标抬起事件
当鼠标抬起时触发
jsDiv.onmouseup = function() {
this.style.width = this.offsetWidth * 2 + "px";
};
mousemove：鼠标移动事件
鼠标移动事件
document.onmousemove = function() {
console.log("鼠标移动");
};
鼠标事件的event对象
触发事件即可得到一个该事件的对象，该对象包含了这个事件的所有信息
document.onclick = function(e) {
var evt = e || window.event;
//常用信息
console.log(evt.clientX, evt.clientY);//距离浏览器的坐标
console.log(evt.pageX, evt.pageY);//当前页面的坐标
console.log(evt.screenX, evt.screenY);
console.log(evt.button);
};
键盘与文本事件
keydown:按下任意按键触发(持续调用)
document.onkeydown = function(e) {
var evt = e || window.event;
//keyCode按键ascii值
console.log(evt.altKey, evt.ctrlKey, evt.shiftKey, evt.keyCode);
};
keyup:抬起任意按键触发
document.onkeyup = function(e) {
var evt = e || window.event;
console.log(evt);//关于键盘的event的所有事件
};
** keypress:按下非(ctrl,alt,shift,capsLock,NumLock)(持续调用)**
document.onkeypress = function(e) {
var evt = e || window.event;
console.log(evt);
};
键盘应用事件小例子
//按下shift和p使小方块变为黄色，使用上下左右键移动小方块
var jsDiv = document.getElementById("box");
var speed = 5;
document.onkeydown = function(e) {
var evt = e || window.event;
// var str = "p";
if (evt.shiftKey == true && evt.keyCode == 80) {
jsDiv.style.backgroundColor = "yellow";
}
switch(evt.keyCode) {
case 37:
if (jsDiv.offsetLeft > 0) {
jsDiv.style.left = jsDiv.offsetLeft - speed + "px";
}
break;
case 38:
if (jsDiv.offsetTop > 0) {
jsDiv.style.Top = jsDiv.offsetTop - speed + "px";
}
break;
case 39:
if (jsDiv.offsetLeft + jsDiv.offsetWidth <= $w()) {
jsDiv.style.left = jsDiv.offsetLeft + speed + "px";
}
break;
case 40:
if (jsDiv.offsetTop + jsDiv.offsetHeight <= $h()) {
jsDiv.style.top = jsDiv.offsetTop + speed + "px";
}
break;
}
};
事件委托
对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事 件处理程序，就可以管理某一类型的所有事件。
如果我们给每个需要的元素都加上事件
<ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say hi</li>
</ul>
var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
EventUtil.addHandler(item1, "click", function(event){
location.href = "http://www.wrox.com";
});
EventUtil.addHandler(item2, "click", function(event){
document.title = "I changed the document's title";
});
EventUtil.addHandler(item3, "click", function(event){
alert("hi");
});
在 JavaScript 中，添加到页面上 的事件处理程序数量将直接关系到页面的整体运行性能。导致这一问题的原因是多方面的。首先，每个 函数都是对象，都会占用内存;内存中的对象越多，性能就越差。其次，必须事先指定所有事件处理程 序而导致的 DOM 访问次数，会延迟整个页面的交互就绪时间。事实上，从如何利用好事件处理程序的 角度出发，还是有一些方法能够提升性能的。
采用事件委托为元素添加事件
使用事件委托，只需在 DOM 树中尽量最高的层次上添加一个事件处理程序
var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "doSomething":
document.title = "I changed the document's title";
break;
case "goSomewhere":
location.href = "http://www.wrox.com";
break;
case "sayHi": 9 alert("hi");
break; }
});
采用事件委托的好处
1、document 对象很快就可以访问，而且可以在页面生命周期的任何时点上为它添加事件处理程序 (无需等待 DOMContentLoaded 或 load 事件)。换句话说，只要可单击的元素呈现在页面上，
就可以立即具备适当的功能。
2、在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的 DOM 引用更少，
所花的时间也更少。
3、整个页面占用的内存空间更少，能够提升整体性能。
最适合采用事件委托技术的事件包括 click、mousedown、mouseup、keydown、keyup 和 keypress。 虽然 mouseover 和 mouseout 事件也冒泡，但要适当处理它们并不容易，而且经常需要计算元素的位置。
(因为当鼠标从一个元素移到其子节点时，或者当鼠标移出该元素时，都会触发 mouseout 事件。)
知识小扩展
DOM0，DOM2，DOM3事件处理方式区别
文档对象模型是一种与编程语言及平台无关的API(Application programming Interface)，借助于它，程序能够动态地访问和修改文档内容、结构或显示样式。W3C协会早在1988年就开始了DOM标准的制定，W3C DOM标准可以分为DOM1,DOM2,DOM3三个版本。
DOM1级主要定义的是HTML和XML文档的底层结构。
DOM2和DOM3级别则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。
为此DOM2和DOM3级分为许多模块（模块之间具有某种关联），分别描述了DOM的某个非常具体的子集。
1、DOM0级事件处理方式：
通过javascript制定事件处理程序的传统方式。就是将一个函数赋值给一个事件处理属性。第四代web浏览器出现，至今为所有浏览器所支持。优点，简单且具有跨浏览器的优势。
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(this.id);//this指定当前元素btn
}
删除DOM0事件处理程序，只要将对应事件属性置为null即可。
btn.onclick = null;
缺点：一个事件处理程序只能对应一个处理函数。
2、DOM2级事件处理方式
DOM2级事件处理方式指定了，添加事件处理程序和删除事件处理程序的方法。
添加事件：
元素节点.addEventListener(参数1, 参数2, 参数3);
参数1：事件名
参数2：响应事件的函数
参数3：事件流 一般情况下为false事件监听可以添加多个事件处理程序，多个事件相互之间互不影响。
移除事件
元素节点.removeEventListener(参数1, 参数2, 参数3);
参数1：事件名
参数2：响应事件的函数
参数3：事件流 一般情况下为false事件监听可以添加多个事件处理程序，多个事件相互之间互不影响。
例子在上述事件处理程序中已经说过，此处不再列举
注意：
a) eventName的值均不含on,例如注册鼠标点击事件eventName为“click”
b) 处理函数中的this依然指的是指当前dom元素
c) 通过addEventListener添加的事件处理程序，只能通过removeEventListener来删除，也就是说通过addEventListener添加的匿名函数将无法被删除。
IE中的DOM2级事件处理
d) IE中的DOM2级事件处理使用了attachEvent和detachEvent来实现。这俩个方法接受俩个相同的参数，事件处理名称和事件处理函数。IE8级更早版本只支持冒泡型事件，所以attachEvent添加的事件都会被添加到冒泡阶段。
var btn = document.getElementById("btn");
btn.attachEvent("onclick",function(){
alert(this);//此处this是window
});
通过attachEvent添加的事件第一个参数是“onclick”而非标准事件中的“click”。在使用attachEvent方法和DOM0级事件处理程序的主要区别在于事件处理程序的作用域。采用DOM0级处理方式，事件处理程序会在其所属元素的作用域内运行。使用attachEvent，事件处理程序会在全局作用域内运行，因此this等于window。
跨浏览的事件处理方式：
var EventUtil = {
addEventHandler:function(element,type.handler){
if(element.addEventListener){
element.addEventListener(type,handler);
}else if(element.attachEvent){
element.attachEvent("on" + type,handler);
}else{
element["on" + type] = handler;
}
},
removeEventHandler:function(element,type,handler){
if(element.addEventListener){
element.removeEventListener(type,handler);
}else if(element.detachEvent){
element.detachEvent("on" + type,handler);
}else{
element["on"+type] = null;
}
}
}
3、DOM3事件
DOM浏览器中可能发生的事件有很多种，不同事件类型具有不同的信息，DOM3级事件规定了一下几种事件：
UI事件，当用户与页面上的元素交互时触发；
焦点事件，当元素获得或者失去焦点时触发；
鼠标事件，当用户通过鼠标在页面上执行操作时触发；
滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
文本事件，当在文档中，输入文本时触发；
键盘事件，当用户通过键盘在页面上执行操作时触发；
合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；
变动事件，当底层Dom结构发生变化时触发；
DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件。包括IE9在内的主流浏览器都支持DOM2级事件，IE9也支持DOM3级事件。
DOM中的事件模拟（自定义事件）：
DOM3级还定义了自定义事件，自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent");
返回的对象有一个initCustomEvent（）方法接收如下四个参数。
1）type：字符串，触发的事件类型，自定义。例如 “keyDown”，“selectedChange”;
2）bubble（布尔值）：标示事件是否应该冒泡；
3）cancelable(布尔值)：标示事件是否可以取消；
4）detail（对象）：任意值，保存在event对象的detail属性中；
可以像分配其他事件一样在DOM中分派创建的自定义事件对象。如：
var div = document.getElementById("myDiv");
EventUtil.addEventHandler(div,"myEvent", function () {
alert("div myEvent!");
});
EventUtil.addEventHandler(document,"myEvent",function(){
alert("document myEvent!");
});
if(document.implementation.hasFeature("CustomEvents","3.0")){
var e = document.createEvent("CustomEvent");
e.initCustomEvent("myEvent",true,false,"hello world!");
div.dispatchEvent(e);
}
这个例子中创建了一个冒泡事件“myEvent”。而event.detail的值被设置成了一个简单的字符串，然后在div和document上侦听该事件，因为在initCustomEvent中设置了事件冒泡。所以当div激发该事件时，浏览器会将该事件冒泡到document。
IE中的事件模拟(IE8及之前版本中)：
与DOM中事件模拟的思路类似，先创建event对象，再为其指定相应信息，然后再使用该对象来触发事件。当然IE在实现以下每个步骤都不太一样。
例如：
var btn = document.getElementById("myBtn");
//创建事件对象,不接受任何参数，结果会返回一个通用的event对象，你必须为该event对象指定所有必要的信息。
var event = document.createEventObject();
//初始化事件对象
event.screenX = 100；
event.screenY = 0;
event.clientX = 0;
event.clientY =0;
event.ctrlKey = false;
event.altKey = false;
event.shiftKey = false;
event.button = 0;
//触发事件
btn.fireEvent("onclick",event);
