Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
事件句柄 (Event Handlers)
HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。
| 属性 | 此事件发生在何时... |
|---|---|
| onabort | 图像的加载被中断。 |
| onblur | 元素失去焦点。 |
| onchange | 域的内容被改变。 |
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onerror | 在加载文档或图像时发生错误。 |
| onfocus | 元素获得焦点。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
| onload | 一张页面或一幅图像完成加载。 |
| onmousedown | 鼠标按钮被按下。 |
| onmousemove | 鼠标被移动。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseup | 鼠标按键被松开。 |
| onreset | 重置按钮被点击。 |
| onresize | 窗口或框架被重新调整大小。 |
| onselect | 文本被选中。 |
| onsubmit | 确认按钮被点击。 |
| onunload | 用户退出页面。 |
鼠标 / 键盘属性
| 属性 | 描述 |
|---|---|
| altKey | 返回当事件被触发时，"ALT" 是否被按下。 |
| button | 返回当事件被触发时，哪个鼠标按钮被点击。 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 |
| ctrlKey | 返回当事件被触发时，"CTRL" 键是否被按下。 |
| metaKey | 返回当事件被触发时，"meta" 键是否被按下。 |
| relatedTarget | 返回与事件的目标节点相关的节点。 |
| screenX | 返回当某个事件被触发时，鼠标指针的水平坐标。 |
| screenY | 返回当某个事件被触发时，鼠标指针的垂直坐标。 |
| shiftKey | 返回当事件被触发时，"SHIFT" 键是否被按下。 |
绑定方式
绑定事件的三种方式：
a.直接标签绑定 onclick='func();'
1 第一种绑定方式 2 <input type='button' onclick='ClickOn(this)'/> 3 <script> 4 function ClickOn(self){ 5 // self 当前点击的标签 6 } 7 </script>
b.先获取DOM对象，然后再进行绑定；
var obj = document.getElementById('XX').onclick
var obj = document.getElementById('XX').onfocus
1 <input type='button'/> 2 <script> 3 document.getElementsByTagName('input').onclick=function(){ 4 // this代指当前点击的标签 5 } 6 </script>
两种绑定方式不同，this的传入方式也不同。
this，当前触发事件的标签。-->谁调用这个函数，this就指向谁.
c.第三种绑定方法：通过addEventListener方法对一个DOM对象绑定多个同样的事件。
语法：element.addEventListener(event, function, useCapture)
实例1：用第二种绑定方法对一个DOM对象绑定两个onclick事件。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #i1{ 8 background-color:red; 9 300px; 10 height:400px; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="i1"> 16 我是DOM 0样式 17 </div> 18 <script> 19 var mydiv=document.getElementById('i1'); 20 mydiv.onclick=function(){ 21 console.log('mydiv'); 22 } 23 mydiv.onclick=function(){ 24 console.log('append2'); 25 } 26 </script> 27 28 </body> 29 </html>
解析：
上面的代码中，第二个function将第一个function进行了覆盖，所以在调用时返回的仅仅是“append2”，未能实现上面要求的对一个DOM对象绑定两个同样的事件。
我们通过第三种绑定方式可以进行实现，下面是实现的案例。
实例2：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #i1{ 8 background-color:red; 9 300px; 10 height:400px; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="i1"> 16 我是DOM 0样式 17 </div> 18 <script> 19 var mydiv=document.getElementById('i1'); 20 mydiv.addEventListener('click',function(){console.log(1)},false); 21 mydiv.addEventListener('click',function(){console.log(2)},false); 22 </script> 23 24 </body> 25 </html>
通过上面的实例，我们成功实现了对一个DOM对象绑定了两个同一个事件。
Q：element.addEventListener(event, function, useCapture)中useCapture指的是什么？
在W3C中标准模型中，事件分为捕获和冒泡。useCapture中是布尔值（true 或 false），分别代表的是：
-
-
- true - 事件句柄在捕获阶段执行
- false- false- 默认。事件句柄在冒泡阶段执行
-
实例1：冒泡阶段。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #main{ 8 background-color:red; 9 980px; 10 height:500px; 11 position:relative; 12 font-size: 38px; 13 } 14 #content{ 15 background-color:green; 16 400px; 17 height:250px; 18 position:absolute; 19 top:100px; 20 left:300px; 21 font-size:38px; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="main"> main 27 <div id="content"> 28 content 29 </div> 30 31 </div> 32 <script> 33 var main = document.getElementById('main'); 34 var content = document.getElementById('content'); 35 main.addEventListener('click',function(){console.log(main)},false) 36 content.addEventListener('click',function(){console.log(content)},false) 37 38 </script> 39 40 </body> 41 </html>
从上面执行返回的结果来看，在冒泡阶段执行的顺序，是先抓取最内部的content，再逐层抓取外层的main。第二步，仅click main的区域，与content内容不交叉，因此仅返回main的内容。
实例2：捕获阶段。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #main{ 8 background-color:red; 9 980px; 10 height:500px; 11 position:relative; 12 font-size: 38px; 13 } 14 #content{ 15 background-color:green; 16 400px; 17 height:250px; 18 position:absolute; 19 top:100px; 20 left:300px; 21 font-size:38px; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="main"> main 27 <div id="content"> 28 content 29 </div> 30 31 </div> 32 <script> 33 var main = document.getElementById('main'); 34 var content = document.getElementById('content'); 35 main.addEventListener('click',function(){console.log(main)},true) 36 content.addEventListener('click',function(){console.log(content)},true) 37 38 </script> 39 40 </body> 41 </html>
从上面执行返回的结果来看，在捕获阶段执行的顺序，是先抓取最外部的main，再逐层抓取内层的content。第二步，仅click main的区域，与content内容不交叉，因此仅返回main的内容。
Q：如何实现 行为、样式和结构相分离的页面？
答：用DOM 1的方式去实现页面，并且推荐在工作和项目中使用DOM 1。更易维护更易检查。
下面我们通过用DOM 0和 DOM 1 写的不同的实例来比较区分两者的区别：
实例1：DOM 0
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #i1{ 8 background-color:red; 9 300px; 10 height:400px; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="i1" onclick="t1();"> 16 我是DOM 0样式 17 </div> 18 <script> 19 function t1(){ 20 var tag = document.getElementById('i1'); 21 console.log(tag); 22 } 23 </script> 24 25 </body> 26 </html>
实例2：DOM 1
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #i1{ 8 background-color:red; 9 300px; 10 height:400px; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="i1"> 16 我是DOM 0样式 17 </div> 18 <script> 19 var mydiv=document.getElementById('i1'); 20 mydiv.onclick=function(){ 21 console.log('mydiv'); 22 } 23 </script> 24 25 </body> 26 </html>
实例3：鼠标移到表格上整行变色，移除则恢复；DOM 0实现方式。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 table{ 8 border:1px; 9 300px; 10 11 } 12 </style> 13 </head> 14 <body> 15 <table> 16 <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>3</td></tr> 17 <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>3</td></tr> 18 <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>3</td></tr> 19 </table> 20 <script> 21 function t1(n){ 22 var myTrs = document.getElementsByTagName('tr')[n]; 23 myTrs.style.backgroundColor='red'; 24 } 25 function t2(n){ 26 var myTrs = document.getElementsByTagName('tr')[n]; 27 myTrs.style.backgroundColor=''; 28 } 29 </script> 30 31 </body> 32 </html>
实例4：鼠标移到表格上整行变色，移除则恢复；DOM 1实现方式。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 table{ 8 border:1px; 9 300px; 10 11 } 12 </style> 13 </head> 14 <body> 15 <table> 16 <tr><td>1</td><td>2</td><td>3</td></tr> 17 <tr><td>1</td><td>2</td><td>3</td></tr> 18 <tr><td>1</td><td>2</td><td>3</td></tr> 19 </table> 20 <script> 21 var myTrs=document.getElementsByTagName('tr'); 22 for(var i=0;i<myTrs.length;i++){ 23 myTrs[i].onmouseover=function(){ 24 this.style.backgroundColor='red'; 25 } 26 myTrs[i].onmouseout=function(){ 27 this.style.backgroundColor=''; 28 } 29 } 30 </script> 31 32 </body> 33 </html>