[TimLinux] JavaScript 事件

1. 简介

JavaScript与HTML之间的交互式通过事件来实现的，事件是文档或浏览器窗口中发生的一些特定的交互瞬间，使用事件处理程序来预订事件，从而在事件发生时，能够执行特定的代码。事件使页面的行为（JavaScript）与页面的外观（HTML、CSS）解耦。BOM、DOM都有支持的事件类型。

事件是发生在对象上的（比如：window对象，节点对象）

2. 事件流

事件流：描述的是从页面接收事件的顺序。两种事件流：冒泡流，捕获流。

2.1. 事件冒泡

事件冒泡：事件开始时由最具体的元素（嵌套最深处的那个节点）接收，然后逐层向上传播到较为不具体的节点（文档）。

document  Document 第四
 |
 |------- html  Element html 第三
            |
            |-------body  Element body 第二
                       |
                       |-------div Element div 第一

所有浏览器都支持事件冒泡，事件冒泡的终点：window 对象。

2.2. 事件捕获

事件捕获：不太具体的节点更早接收到事件，最具体的节点应该最后接收到事件。用意：在事件到达预订目标之前捕获它。

document  Document 第一
 |
 |------- html  Element html 第二
            |
            |-------body  Element body 第三
                       |
                       |-------div Element div 第四

老版本浏览器对事件捕获支持不好，可放心使用事件冒泡，特殊需要时才是用事件捕获。

2.3. DOM事件流

DOM2级事件流：规定事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

• 事件捕获阶段：为截获事件提供了机会；
• 实际的目标接收到事件
• 事件冒泡阶段：对事件做出相应。

第一  document Document                     第七
  第二 |-- html  Element html             第六
        第三 |-- body Element body     第五
                 |-- div Element div
                     第四

多数浏览器支持DOM2级事件流

3. 事件处理程序

事件就是用户或者浏览器自身执行的某种动作，如：click, load, mouseover，都是事件的名字，而事件处理程序则是响应某个事件的函数，事件处理程序的名字以“on”开头，比如：click事件的处理程序为onclick，load事件的处理程序为onload。

3.1. HTML事件处理程序

在HTML标签中设置属性，当属性名与事件处理程序同名时，则是指定事件处理程序，属性的值为能够执行的JavaScript代码。

1.
<input type="button" value="Click Me" onclick="console.log('clicked');" />

2.
<script type="text/javascript">
     function showMessage() { console.log('Hello World!'); }
</script>
<input type="button" value="Click me" onclick="showMessage();" />

3.
<input type="button" value="Click Me" onclick="console.log(event.type"); " />
直接通过event变量访问事件对象，不需要定义它，也不用从函数的参数列表中读取。通过event可以访问操作事件
对象自身，这个event.type的输出为click，表示事件类型.

<input type="button" value="Click Me" onclick="console.log(this.value); " />
这里的this访问的是事件的目标元素，也是一个不需要定义即可操作的对象。this.value输出的是Click Me.

<input type="button" value="Click Me" onclick="console.log(value);" />
效果与上面的一致：with(document) { with(this) { // 元素属性 } }

缺点：HTML与JavaScript代码紧耦合。

3.2. DOM0级事件处理程序

通过JavaScript将一个函数赋值给一个事件处理程序属性，从而达到：简单、跨浏览器、松耦合的目的：

var btn = document.getElementById('myBtn');
btn.onclick = function () { console.log(this.id); };

DOM0级指定的事件处理程序称为：元素的方法，所有可以访问this来直接操作当前元素。

删除事件处理程序：
btn.onclick = null;

3.3. DOM2级事件处理程序

DOM2级事件定义了两个函数：指定事件处理程序的操作函数 addEventListener()、删除事件处理程序的函数 removeEventListerer()。所以DOM节点都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数、一个布尔值(true:在捕获阶段调用事件处理程序, false: 在冒泡阶段调用事件处理程序)。

var btn = document.getElementById('myBtn');
btn.addEventListener(
    'click',  // 事件名
    function () { console.log(this.id); },  // 事件处理程序
    false  // false: 在冒泡阶段调用事件处理程序
);

// 可以再添加一个事件处理程序，事件发生时，将按照顺序调用事件处理程序。
btn.addEventListener(
    'click',
    function () { console.log('hello world'); },
    false
);

// 1. addEventListener添加的事件处理程序，必须使用removeEventListener来删除
// 2. removeEventListener要求接收的参数与addEventListener参数相同
// 3. 添加的匿名事件处理程序，将无法删除，因为每次匿名函数的实现都是一个新的函数，并不能关联到上一次定义的匿名函数。

3.4. IE事件处理程序

IE实现DOM中类似的两个函数：attachEvent()、detachEvent()，接收相同的两个参数：事件处理程序名称（不是事件名称哦，注意区别）、事件处理程序函数。IE8之前只支持冒泡事件流，所以添加的事件处理程序在冒泡阶段。

var btn = document.getElementById('myBtn');
btn.attachEvent(
    'onclick',
    function () { console.log(this === window); }  // 注意与DOM0级的差别，这里的this为window对象，即全局作用域中。DOM0是在元素作用域中。
);

btn.attachEvent(
    'onclick',
    function () { console.log('Hello'); } // 也可以添加多个事件处理函数
);
// 执行顺序与DOM2有差别，是相反的顺序：先执行Hello，然后执行this===window。
// 移除使用detachEvent，参数需要相同，且匿名函数无法移除。与DOM2一致。

新的IE浏览器也支持DOM2级事件处理程序的两个函数。

3.5. 跨浏览器的事件处理程序

实现自己的一套函数，来支持不同浏览器处理：添加事件处理程序、移除事件处理程序的功能。

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element['on' + type] = handler;
        }
    },
    removeHandler: function (element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element['on' + type] = null;
        }
    }
};

var btn = document.getElementById('myBtn');
var handler = function () { console.log('clicked'); };

EventUtil.addHandler(btn, 'click', handler);
EventUtil.removeHandler(btn, 'click', handerl);

4. 事件对象

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

• 导致事件的元素
• 事件的类型
• 其他与特定事件相关的信息：
  • 鼠标操作导致的事件对象：包含鼠标位置信息
  • 键盘操作导致的事件对象：包含安心的键有关信息

所有浏览器都支持 event 对象，但支持方式不同。

4.1. DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中（包括：DOM0， DOM2）。

var btn = document.getElementById('myBtn');
btn.onclick = function(event) {
    console.log(event.type); // click
};

btn.addEventListener(
    'click',
    function (event) { console.log(event.type); },
    false
);

// event.type表示事件类型：click

事件对象包含：

• 属性：创建它的特定事件相关的属性
• 方法：创建它的特定事件相关的方法

不同事件对象，属性和方法列表有差异，但是都包含以下功能成功：

属性/方法	类    型	读 / 写	说明
bubbles	Boolean	只读	表明事件是否冒泡
cancelable	Boolean	只读	表明是否可以取消事件的默认行为
currentTarget	Element	只读	其事件处理程序当前正在处理事件的那个元素
defaultPrevented	Boolean	只读	true: 已经调用了preventDefault() DOM3级事件中新增
detail	Integer	只读	与事件相关的细节信息
eventPhase	Integer	只读	调用事件处理程序的阶段： 1: 捕获阶段 2: 处于目标中 3: 冒泡阶段
preventDefault()	Function	只读	取消事件的默认行为，如果 cancelable===true则可以使用这个方法
stopImmediatePropagation()	Function	只读	取消事件的进一步捕获或冒泡，同时组织任何 事件处理程序被调用(DOM3级事件中新增）
stopPropagation()	Function	只读	取消事件的进一步捕获或冒泡，如果 bubbles===true，则可以使用这个方法
target	Element	只读	事件的目标
trusted	Boolean	只读	true: 表示事件是浏览器生成的 false: 表示事件是开发人员通过JS创建的 (DOM3级事件中新增）
type	String	只读	被触发的事件的类型
view	AbstractView	只读	与事件关联的抽象视图，等同于事件发生的 window对象。

事件处理程序内部，对象 this === event.currentTarget 的值，而target则只包含事件的事件目标。

var btn = document.getElementById('myBtn');

// click目标是btn, 所以this, event.target, event.currentTarget都相同
btn.onclick = function (event) {
    console.log(event.currentTarget === this); // true
    console.log(event.target === this); // true
};

// 事件注册在父元素，但是点击的位置在myBtn上时：
// event.target就是点击时所在是元素：myBtn了，因为myBtn上没有注册click事件，所以事件冒泡到document.body上了。
// this, event.currentTarget 都是 document.body事件注册元素。
document.body.onclick = function (event) {
    console.log(event.currentTarget === document.body); // true
    console.log(this === document.body); // true
    console.log(event.target === document.getElementById('myBtn') ); // true
};

一个函数处理多个事件的时候，可以使用event.type属性来进行分支操作：

vat btn = document.getElementById('myBtn');
var handler = function (event) {
    switch (event.type) {
        case "click":
            console.log('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;

要阻止特定事件的默认行为，比如链接的默认行为是导航到href指定的url，这时可以使用event.preventDefault()来阻止导航行为。

var link = document.getElementById('myLink');
link.onclick = function (event) {
    event.preventDefault();
};

另外也可以阻止事件的冒泡，避免父、子节点都注册了相同事件时，子节点发生的事件，冒泡到父节点：

var btn = document.getElementById('myBtn');
btn.onclick = function(event) {
    console.log('clicked');
    event.stopPropagation();
};

document.body.onclick = function(event) {
    console.log('body clicked');
};

eventPhase属性，可以判断当前调用的处理程序是由那个阶段触发了调用行为：

var btn = document.getElementById('myBtn');
btn.onclick = function (event) {
    console.log(event.eventPhase); // 点击btn，自身所在“处于目标”阶段，输出2
};

document.body.addEventListener(
    'click',
    function(event) {console.log(event.eventPhase); }, // 点击btn，捕获阶段父节点有注册函数，输出1
    true  // 注册为捕获阶段事件监听程序
);

document.body.onclick = function (event) {
    console.log(event.eventPhase); // 点击btn时，冒泡行为触发的该函数调用，输出为3
};

4.2. IE中的事件对象

• DOM0：处理程序中获取event对象使用window.event方式
• DOM2：event对象作为处理程序的参数出入的（attachEvent，addEventListener）
• HTML：直接使用event变量访问event对象。

多出一些通用的属性：

属性/方法	类  型	读/写	说明
cancelBubble	Boolean	读/写	默认false，设置为true则可以取消冒泡事件， 与stopPropagation()相同
returnValue	Boolean	读/写	默认true，设置为false则可取消事件的默认行为，与preventDefault()相同
srcElement	Element	只读	事件的目标（与DOM的targe属性相同）
type	String	只读	被触发的事件类型

var btn = document.getElementById('myBtn');
btn.onclick = function () {
    console.log(window.event.srcElement === this); // true
};

btn.attachEvent(
    'onclick',
    function (event) { console.log(event.srcEvent === this); } // false
};

4.3. 跨浏览器的事件对象

根据之前的描述，可以扩充实现EventUtil的功能集合：

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element['on' + type] = handler;
        }
    },
    removeHandler: function (element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element['on' + type] = null;
        }
    },
    getEvent: function (event) {
        return event ? event: window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
       } else {
            event.cancelBubble = true;
        }
    }
};

5. 事件类型

DOM3级事件规定以下类型事件：

• UI事件：当用户与页面上的元素交互时触发
• 焦点事件：当元素获得、失去焦点时触发
• 鼠标事件：当用户通过鼠标在页面上执行操作时触发
• 滚轮事件：当使用鼠标滚轮（或类似设备）时触发
• 文本事件：当在文档中输入文本时触发
• 键盘事件：当用户通过键盘在页面上执行操作是触发
• 合成事件：当为IME（Input Method Editor，输入法编辑器）输入字符时触发
• 变动事件：当底层DOM结构发生变化时触发
• 变动名称事件：当元素、属性名变动时触发（已废弃）

5.1. UI事件

• load：页面完全加载完后（包括所有图像、JavaScript文件、CSS文件等外部资源）在 window 上面触发
  • 图片上也可以注册 load 事件，图片加载完成后，调用处理程序。
• unload：页面完全卸载完后在 window 上面触发
• abort：在用户停止下载过程时，如果嵌入内容没有加载完，在<object>元素上面触发
• error：
  • 发生JavaScript错误时，在 window 上面触发
  • 无法加载图片在<img>元素上面触发
  • 无法加载嵌入内容在<object>元素上面触发
  • 当有一个或多个框架无法加载时，在框架集上面触发
• select：当用户选择文本框（<input>、<textarea>）中的一个或多个字符时触发
• resize：当窗口、框架的大小变化时，在 window 或框架上面触发
  • 当浏览器窗口被调整到一个新的高度、宽度时，会触发resize事件
• scroll：在window对象上发生，体现的是页面中元素的变化。
  • 当用户滚动带滚动条的元素中的内容时，在该元素上面触发
  • <body>元素中包含所加载页面的滚动条
  • body.scrollLeft， body.scrollTop来监控滚动条的变化。

5.2. 焦点事件

在页面元素获得、失去焦点时触发，结合：document.activeElement属性、document.hasFocus()方法，知晓用户在页面上的行踪。DOM3废弃的事件没有列出

• blur：在元素失去焦点时触发，该事件不会冒泡
• focus：在元素获得焦点时触发，该事件不会冒泡
• focusin：在元素获得焦点时触发，这个事件与HTML事件focus等级，但会冒泡。
• focusout：在元素失去焦点时触发，这个事件是HTML事件blur的通用版本。

当焦点从页面中的一个元素移动到另一个元素，会依次触发下列事件：

1. focusout在失去焦点的元素上触发；(失去焦点元素）
2. focusin在获得焦点的元素上触发；（获得焦点元素）
3. blur在失去焦点的元素上触发；(失去焦点元素)
4. focus在获得焦点的元素上触发；（获得焦点元素）

判断：document.implementation.hasFeature('FocusEvent', '3.0');

5.3. 鼠标与滚轮事件

web开发中最常用的一类事件，如下：

• click：单击主鼠标按钮、按下回车键时触发
• dblclick：双击主鼠标按钮是触发
• mousedown：按下任意鼠标按钮是触发（不能通过键盘触发）
• mouseenter：鼠标光标从元素外部首次移动到元素范围内时触发，（该事件不冒泡），光标移动到后代元素上不会触发
• mouseleave：在元素上方的鼠标光标移动到元素范围之外时触发，（该事件不冒泡），光标移入后代元素不会触发
• mousemove：当鼠标指针在元素内部移动时重复触发，（不能通过键盘触发）
• mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。另一个元素可以是前一个外部元素、这个元素的子元素（不能通过键盘触发）
• mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发（不能通过键盘触发）
• mouseup：在用户释放鼠标按钮时触发（不能通过键盘触发）

事件触发顺序：

1. mousedown
2. mouseup
3. click
4. mousedown
5. mouseup
6. click
7. dblclick

判断：document.implementation.hasFeature('MouseEvents', '2.0'), document.implementation.hasFeature('MuoseEvent', '3.0');

注：3.0,feature名为MouseEvent（没有s）

几个坐标相关值：

1. 客户区左边位置：event.clientX（鼠标位置信息：当前位置离浏览器左侧距离），event.clientY（鼠标位置信息：当前位置离浏览器显示区顶部距离）
2. 页面左边位置：event.pageX，event.pageY
   • 页面没有滚动时，pageX === clientX， pageY===clientY
   • 页面发生滚动时，pageX和pageY在变化，但是clientX和clientY不动
   • 滚动信息：scrollLeft + clientX === pageX, scrollTop + clientY === pageY
3. 屏幕坐标位置：event.screenX（鼠标离显示器最左边的距离），event.screenY（鼠标离显示器顶部的距离）
4. 光标离目标元素边界位置：event.offsetX（目标边界X坐标），event.offsetY（目标边界Y坐标）

修改键（Shift、Ctrl、Alt和Meta）+鼠标操作可以定义另外一些事件行为，对象的属性：event.shiftKey，event.ctrlKey，event.altKey，event.metaKey，按下值为true，未按下值为false。

相关元素：mouseover， mouseout事件牵涉的是多个元素，事件的主目标是获取光标的元素，而相关元素（relatedTarget，toElement，fromElement）则是失去光标的元素：

• DOM使用relatedTarget设置相关元素
• IE：mouseover事件触发时，使用fromElement保存相关元素
• IE：mouseout事件触发时，使用toElement保存相关元素

鼠标按键：也可以通过按键值的判断来确定发生的是什么事件类型，存入event.button属性中

• 0：没有按下按钮
• 1：按下主鼠标按钮
• 2：按下次鼠标按钮
• 3：同时按下主、次鼠标按钮
• 4：按下中间鼠标按钮
• 5：同时按下主、中间鼠标按钮
• 6：同时按下次、中间鼠标按钮
• 7：同时按下三个鼠标按钮

鼠标滚轮事件：mousewheel事件，它有一个属性：event.wheelDelta（往前滚动：+120的倍数，往后滚动时-120的倍数），判断这个值的正负来确定滚动的方向。Firefox支持的是DOMMouseScroll事件（鼠标滚动时发生，event.detail存放了值：前滚动-3的倍数，后滚动+3的倍数）

5.4. 键盘与文本事件

三个键盘事件：

• keydown：按下键盘上的任意键时触发，如果按住不放，会重复触发该事件
• keypress：按下键盘上的字符键时触发，如果按住不放，会重复触发该事件，按下Esc键也会触发该事件
• keyup：释放键盘上的按键时触发

一个文本事件：

• textInput：这个事件是keypress的补充，用意是在将文本显示给用户之前更容易拦截文本，在文本插入文本框之前触发textInput事件。

事件顺序：

• keydown
• keypress（按下了字符键才有这个事件）
• keyup（文本框发生变化之后触发的，前两个为发生变化之前）

同样存在修改键：shiftKey，ctrlKey，altKey，metaKey（IE不支持metaKey）

5.4.1. 键码

keydown、keyup事件发生时，event.keyCode属性中会包含一个代码，与键盘上一个特定的键对应。数字、字母的键码值与ASCII中对应小写字母或数字的编码相同。

Esc的键码：27，左（37）、上（38）、右（39）、下（40），退格（Backspace：8），制表（Tab：9），回车（Enter：13），上档（Shift：16），控制（Ctrl：17），Alt（18），大写锁定（20），上翻页（33），下翻页（34）

5.4.2. 字符编码

event.charCode属性，只有keypress事件才有该属性。

getCharCode = function(event) {
    if (typeof event.charCode == 'number') {
        return event.charCode;
    } else {
        return event.keyCode;
    }
};

5.4.3. DOM3级变化

不再包含charCode，而是使用key、char两个新属性

• key 属性取代 keyCode，值为一个字符串：'k', 'M', 'Shift', 'Down'
• char 属性在按下字符键时的行为与key相同，按下非字符集时为null
• keyIdentifier 返回一个 “”U+0000"字符串格式
• location，keyLocation：发生在左侧还是右侧：1: 左侧， 2: 右侧，3: 数字小键盘，4: 移动设备键盘，5: 手柄。
• getModifierState()：参数是"Shift", "Ctrl", "Alt" 字符串，true表示按下，false表示没有按下。

5.4.4. textInput事件

event.inputMethod属性，用来表示文本输入到文本框中的方式：

• 0：不确定输入方式
• 1：键盘输入
• 2：粘贴进来的
• 3：拖放进来的
• 4：IME输入的
• 5：表单中选择某一项输入的
• 6：手写输入的
• 7：语音输入的
• 8：几种方法组合输入的
• 9：脚本输入的

5.5. 复合事件

很少用到

5.6. 变动事件

很少用到

5.7. HTML5事件

• contextmenu事件：鼠标右键可以调出上下文菜单，支持事件冒泡。preventDefault()阻止默认行为，stopPagation()停止事件冒泡。可以用来自定义自己的鼠标右键菜单。
• beforeunload事件：在转换到其他页面，或者关闭页面之前触发该行为。
• DOMContentLoaded事件：完整的DOM树形成之后触发，而不需要等待一切都加载完毕（load事件）
• readystatechange事件：XMLHttpRequest对象上的事件，不单独讲解。
• pageshow和pagehide事件：第一次听说，以下在看下吧。
• haschange事件：URL发生变化时触发的事件，不知道有什么具体使用场景。

5.8. 设备事件

很少用到

5.9. 触摸与手势事件

很少用到

6. 内存和性能

6.1. 事件委托

”事件处理程序“过多的解决方案就是使用事件委托：利用事件冒泡，只在指定一个事件处理程序，可以管理某一类型的所有事件。示例：

<ul id="myLinks">
    <li id='idLi1">idLi1</li>
    <li id='idLi2">idLi2</li>
    <li id='idLi3">idLi3</li>
</ul>

var item1 = document.getElementById('idLi1');
var item2 = document.getElementById('idLi2');
var item3 = document.getElementById('idLi3');

EventUtil.addHandler(
    item1,
    'click',
    function (event) { console.log('click'); }
);
EventUtil.addHandler(
    item2,
    'click',
    function (event) { console.log('click'); }
);
EventUtil.addHandler(
    item3,
    'click',
    function (event) { console.log('click'); }
);

使用事件委托：
var list = document.getElementById('myLinks');
EventUtil.addHandler(list, 'click', function (event) {
    switch(event.target.id) {
        case 'idLi1':
            console.log('click idLi1');
            break;
        case 'idLi2':
            console.log('click idLi1');
            break;
        case 'idLi3':
            console.log('click idLi1');
            break;
    }
});

6.2. 移除事件处理程序

不需要的事件处理程序，将事件分配到 null 来释放内存。

7. 模拟事件

ttt