DOM總結
1:DOM - document object model 文檔對象模型
作用：給我們提供了一些方法，讓我們可以操作頁面.
2: 獲取標簽對象的方式.
2.1:根據id名獲取元素
console.log(document.getElementById("box"));
使用document.getElementById()獲取元素失敗時結果為null
注意：獲取位置，如果在head中書寫js代碼獲取元素，需要考慮標簽 是否生成
2.2:根據標簽名獲取元素.
getElementsByTagName("div"),得到的是偽數組,要么遍歷,要么給具體的 索引值.
3: js的入口函數.
window.onload = function () { };
作用：在入口函數內書寫的代碼會在頁面完全加載(引入的文件,結構,圖片,文件)后執行.
4:對標簽進行樣式設置操作
標簽.style , 然后再訪問具體的某個樣式名
書寫樣式時，在css中加-的樣式名，例如background-color，在js中需要將-去掉，并將后半部分的首字母大寫
// font-size fontSize z-index zIndex
box.style.backgroundColor = "red";
5:文本操作.
標簽.innerHTML
Innerhtml既可以設置文本,也識別標簽.
6:DOM - 文檔對象模型
前面我們說過只有對象才有屬性和方法
通過觀察我們發現,樣式和文本操作均為通過屬性的形式
使用DOM操作的標簽以及其他內容均為對象形式
7:js中的事件:
js中的事件同樣也是由三個部分組成
1 事件源(觸發事件的元素)(被動)
2 事件類型(例如點擊,鼠標移入)
3 事件處理程序(函數類型)
語法形式:
事件源.事件類型 = function(){
事件處理程序，當事件觸發后，執行內部的所有代碼;
}
8:操作標簽自身支持的行內屬性(id/title/class).
1:獲取: 標簽名.屬性名 iv.id
設置: 標簽名.屬性名 = ”屬性值”div.className = “current”
但是class比較的特殊,因為class是關鍵字,所以換成了className.
2:通過 標簽.className = “abc” 設置的時候,需要將以前的類名帶上,不然就會刪除以前的類名了.
9:標簽行內自定義屬性的操作方式,無法通過標簽.屬性名的方式操作.
既可以設置標簽行內的自定義屬性,也可以設置標簽自身支持的的行內屬 性.但建議僅僅用作標簽的行內自定義屬性.
1 獲取 標簽.getAttribute(屬性名);
console.log(box.getAttribute("hehe"));
console.log(box.getAttribute("id"));
2 設置 標簽.setAttribute(要修改的屬性名,修改成什么值)
box.setAttribute("hehe", "b");
3 移除 標簽.removeAttribute(要移除的屬性名)
box.removeAttribute("hehe")
box.removeAttribute("id").
10:事件內部的代碼僅僅點擊才執行,晚于頁面的加載.其他加載完才執行.
解決方法:
1:自調用函數:
自調用函數(立即執行函數)的功能：
1 用于包裹作用域(模擬塊級作用域).
2 減少全局變量的使用.
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
(function () {
var j = i;
lis[i].onclick = function () {
console.log(j);
};
})();
}
2:給DOM對象添加自定義的屬性.(對象名.屬性)
3:給標簽添加行內的自定義屬性.(setattribute/getAttribute/removeAttribute).
---------------------------------------------第二天------------------------------------------------------
11:DOM第二天有總結.
12:阻止默認的a標簽的跳轉,要在后面設置 return false.
Return false 可以阻止默認跳轉.
13:鼠標的移入移出事件:
鼠標移入事件: onmouseover.
鼠標移出事件: onmouseout.
14:焦點事件:
onfocus 獲取焦點事件：點擊輸入框時，光標在框內跳動
onblur 失去焦點事件：點擊輸入框以外，光標不跳到觸發
15:表單操作內容，自帶value屬性，所以操作內容時直接使用value即可.
Input表單的默認值 value屬性.
16:在所有表單的表單中,僅僅下拉菜單select的默認文本為innerHTML,其他的均為value.
17: 復選框是否選中 checked
checked 設置值為bool值，如果值為true，表示選中，false表示取消選中
注意點(不常用):如果設置的值不是bool值會進行隱式轉換操作
cb.checked = "hehehe";
cb.checked = false;
-------------------------------------------第三天-------------------------------------------------
18:為什么會有兼容問題:
js中有許多的功能，但是某些功能無法在所有的瀏覽器中同時執行
針對這些功能，需要進行兼容性操作。
21: 文本操作.(都是屬性)
Innerhtml 即可以生成文字,也可以生成標簽
如果我們要給一個標簽內部設置大量的文字信息，同樣會進行內部的標簽檢索操作.
純文本的設置:
①:innerText: IE提出的,兼容IE.
②:textcontent: 標準屬性,但是低版本的IE(IE6/7/8)不支持.
22:ie總是出現兼容性的原因
1 瀏覽器升級麻煩
2 系統升級更麻煩
導致了ie會有多個版本同時在市面上存在，我們在書寫代碼時需要考慮到可能額會出現的兼容性問題，保證最大化的用戶使用
23:能力檢測:
檢測當前這個功能是否可以使用，能用則用(看你行不行).
24:文本設置的兼容性:
先隨意找到其中一個屬性，進行使用，查看使用結果，可以用就用，不能用的話換另一個即可
if (typeof box.innerText == "string") {
//如果獲取到了內容，為字符串，但是取值可能為空，所以直接利用隱式轉換的方式不太嚴謹
box.innerText = "我是innerText設置的內容";
} else {
//不支持innerText，可以使用textContent
box.textContent = "我是textContent設置的內容";
}
25:通過style設置/獲取的樣式,僅僅是在行內顯示,但是并不是所有的樣式都是在行內.所有必須要通過其他的方式來獲取樣式.
①:getComputedStyle(). 獲取計算后的樣式(獲取的樣式值是標簽最終生效的那個樣式值). 標準方法,但是不兼容低版本的IE(IE6/7/8);
getComputedStyle(DOM對象).屬性名 getComputedStyle(box, null).width
參數2，一會兒再說，先寫一個null
獲取結果為對象形式，是當前標簽所有樣式的集合
注意，此方法只可以進行樣式值的獲取，結果只讀不可設置,結果為字符串，帶單位
②: 標簽.currentStyle IE自身支持,且得到得是對象.
標簽.currentStyle.屬性名 box.currentStyle.width.
③:DOM對象.getComputedStyle()與DOM對象.currentStyle的能力測試:
if (box.currentStyle) {
//只要進入了if，說明currentStyle的取值為對象，支持
console.log(box.currentStyle.width);
} else {
console.log(getComputedStyle(box, null).width);
}
26:
一次設置多個行內的樣式屬性值(不常用):
box.style.cssText = "width:100px;height:100px;background-color:red;";
27:設置樣式的兩種方式:
①:DOM對象.style.屬性名 = 屬性值.
②:DOM對象.className = 名字. 通過類名來修改樣式
28:根據類名獲取標簽對象:
1:document.getElementsByClassName(類名);
但是低版本IE(IE6/7/8)不兼容,我們必須手寫兼容程序:
獲取標簽對象中,僅僅有document.getElementsByTageName(標簽名)/document.getElementById(ID名)是兼容IE的,所以在書寫原生JS時最好使用tageName與ID的方式來獲取標簽對象.
書寫能力檢測:
//步驟1：進行能力檢測
// if (document.getElementsByClassName) {
// //支持的代碼
// document.getElementsByClassName("box");
// } else {
//如果進入到else，說明當前瀏覽器不支持此方法，自己書寫功能實現。
//需求：根據給定的類名進行元素的獲取
//1 獲取body中的所有標簽
var tags = document.body.getElementsByTagName("*");
var resultArr = [];//結果數組，用于保存獲取到的標簽
//2 檢測當前某個標簽的className屬性的值
for (var i = 0; i < tags.length; i++) {
//3 取出當前某個標簽的類名，用于檢測
var oldCls = tags[i].className;
//4 驗證時，需要考慮，如果取得的標簽不是只有一個類名時，采用相等判斷會導致不準確
//將標簽的類名按照空格分割
var clsArr = oldCls.split(" ");
//5 遍歷，查找指定的部分是否存在
for (var j = 0; j < clsArr.length; j++) {
//如果某個部分和指定類名相等，取出即可
if (clsArr[j] == "box") {
resultArr.push(tags[i]);
break;//跳出
}
}
}
console.log(resultArr);
// }
29:頁面是如何顯示的：
當一個頁面被瀏覽器加載后需要執行以下幾個基本步驟：
1 先解析html文件，將標簽進行生成，根據每個標簽之間的關系，生成一個樹模型(節點樹)
2 再解析css文件，將樣式生成為樣式樹
3 將樣式樹和節點樹合并，生成一個渲染樹(頁面等待進行繪制)
4 瀏覽器會根據渲染樹將頁面顯示出來
4.1 排列：將每個標簽確定尺寸和位置
4.2 繪制：將標簽內部的內容顯示出來(圖片，顏色，文字)
現在我們的重點是上面的第一步
第一步會根據html標簽生成節點樹
作用為，生成每個html標簽的對應的DOM對象，方便用戶對標簽的操作
作用2：一會兒我們要學習的新的訪問關系
30: 節點：對節點樹中的所有形式內容的統稱（都可稱為節點）
元素節點 ：標簽，頁面元素
文本節點 ：文本內容
屬性節點 ：標簽的行內屬性
注釋節點 ：注釋
根節點 ：document (DOM中的頂級對象，所有DOM的內容均為他下屬內容)
31:節點訪問總共分為兩類:(都是屬性)/都是屬性/都是屬性
①:上下級訪問關系(父子關系);父節點/子節點
②:同級訪問關系(兄弟關系);
32:上下級訪問關系(都是屬性):
①:父節點: 節點.parentNode
注意:任意節點，如果具有父節點parentNode的值，結果一定為元素節點(標簽).
②:子節點:
節點.childNodes 獲取所有子節點,但包括換行/空格等文本節點.
節點.children 獲取所有元素子節點（常用）
節點.firstChild 獲取第一個子節點,可能是文本節點.
節點.firstElementChild 獲取第一個元素子節點.(不兼容低版本的IE,但是 不需要寫兼容代碼).可以用以下方式來替換: 節點.children[0];
節點.lastChild 獲取最后一個子節點,可能是文本節點.
節點.lastElementChild 獲取最后一個元素子節點,也不兼容低版本的IE,
不需要書寫兼容代碼,可以用這個來替換:
節點.children[節點.children.length - 1];
33:同級的訪問關系(都是屬性):
節點.previousSibling 前一個節點,但是會獲取到換行空格等內容.
節點.previousElementSibling 前一個元素節點,低版本的IE不兼容.
節點.nextSibling 下一個節點,會獲取到換行空格等內容.
節點.nextElementSibling 下一個元素節點,低版本的IE不兼容.
34:對象的比較,比較的是內存地址值.
每次生成對象,就會在堆內存中產生一個區域存放數據,會有一個內存地址值.
要兩個對象相等,必須內部保存的指針相同才可以(實際上是同一個對象才行)
35:獲取每個兄弟元素:
找父元素,再找所有的子元素,但是必須排除自己.
36:節點的移動:
1 標簽.appendChild(要移動的節點) 追加子節點
效果：將傳入的節點添加到調用節點內的所有子節點后面(最后)
A.appendChild(B); 將B 添加到A元素的子元素的最后面.
2 標簽.insertBefore(要移動的節點,參考節點) 插入子節點
效果，將要移動的節點插入到指定的參考節點之前。
注意：參考節點必須為調用元素的子節點才可以使用。
A.insertBefore(B, C); 將B移動到元素A里面的元素C前面.
當沒有傳入第二個參數時,insertBefore()相當于appendChild();
------------------------------------------第四天-------------------------------------------------------
37:為什么要動態加載元素:
1:提高頁面的響應速度(動態加載結構).
2:節省流量(動態加載圖片).
38:動態加載元素的幾種方式:
1:document.write(字符串); 字符串 = “<div>我是div</div>”
2:DOM對象.innerHTML = 字符串;
3:document.createElement(標簽名);
39: document.write(字符串):
document.write(字符串)的方式基本不用,因為缺點是在太多:
①:無法指定位置添加:
②:如果將document.write在頁面加載后使用，會導致頁面所有內容被清除:
40:DOM對象.innerHTML = 字符串:
1):既可以更改內部的文本,也可以加載標簽.
2):特點
①:會對標簽內部的原有內容進行覆蓋:
1.1:解決方法:取出原來的內容與需要生成的內容進行拼接,再一起生成.
box.innerHTML = box.innerHTML + "<div>我是div</div>";
box.innerHTML += "<div>我是div</div>";簡化寫法
1.2:因為是將舊標簽替換為了新標簽,所以原來舊標簽的事件與自定義屬性均不見了.
②:執行效率比較差:
查看用了多長事件的方法:
console.time("innerHTML的執行速度");
for (var i = 0; i < 2000; i++) {
box2.innerHTML += "<div></div>";
}
console.timeEnd("innerHTML的執行速度");
41:document.createElement(標簽名)
在創建元素后不會立刻在頁面中顯示
如果想要在頁面中顯示，需要添加到頁面中的某個位置(appendChild/insertBefore)
而且效率比較的高,與innerhtml的效率比例為1:1000:
總結:我們在使用document.createElement時，沒有特定的使用場景，只要innerHTML不適用，均可使用document.createElement.
42:解決innerhtml創建元素效率低下的問題:
解決方法:可以使用字符串或者數組的替換方式，在循環中替代innerHTML，將最終結果一次設置給innerHTML屬性.
代碼優化后，執行時間為 2.7ms，大幅度的提高執行速度
console.time("innerHTML的執行速度");
for (var i = 0; i < 2000; i++) {
str += "<div></div>";
}
box.innerHTML = str;
console.timeEnd("innerHTML的執行速度");
43:幾種創建元素的方式的總結:
直接用document.createElement(標簽名)就好了,大量的創建我們后面會用模板的形式.
①:innerHTML的使用場景：
如果需要創建的結構大量重復并且結構比較復雜時，推薦使用innerHTML的方式（操作方式為字符串拼接，可以直接拷貝html中設計好的結構，直接使用）.
②:document.createElement必須使用的場景：
要進行動態創建元素的位置上具有舊的標簽，并且舊的標簽可能具有事件時，必須使用此方式。
44:移除子節點:
父節點.removeChild(要刪除的子節點);
45:onkeydown/onkeyup 事件
onkeydown 當鍵盤上的某個按鍵按下后，觸發事件
onkeyup 當鍵盤上的某個按鍵按下后，按鍵抬起觸發
獲取輸入框的內容時：
1 keydown無法獲取到本次剛輸入的內容部分
2 keyup可以獲取到當前輸入的結果(常用)
46: str.indexOf(“abc”) abc是否是str的一部分 返回true/false
使用indexOf的時候想要匹配成功，參數字符串必須比調用的字符串短
注意的點：使用空字符串對其他字符串進行匹配時，可以在開頭立刻匹配成功
-------------------------------------------第五天----------------------------------------------
47: 克隆 標簽.cloneNode(bool值)
需要克隆的標簽不要設置id名.
默認值為false，false表示淺復制，只復制標簽本身，不復制內部內容
true表示深復制，復制標簽以及內部內容
無論哪種克隆方式(深復制或者淺復制)均無法復制標簽的內容或內部的屬性.
復制完的標簽必須使用appendchild,或者insertbefore添加到具體的標簽內,不然看不到.
48: 替換節點: replaceChild();
父節點.replaceChild(新節點,替換哪個子節點);
返回值，替換掉的節點會被返回，可以根據需求繼續使用;
49:節點是對節點樹中所有內容的統稱(對頁面中所有內容的統稱)
1 元素節點
2 屬性節點
3 文本節點
7 注釋節點
9 document 根節點
每個節點都具有三個屬性：
①:nodeType 用于標注某個節點的類型:
返回值為數值類型，1表示元素節點
②:nodeValue 用于表示節點的節點值
元素節點沒有節點值屬性，返回值為null
③:nodeName 用于顯示節點名
nodeName屬性對于元素節點來說，結果為標簽名(在html中為大寫形式,在xhtml中為小寫形式)
50:總結:
[圖片上傳失敗...(image-d355f4-1515936359360)]
-------------------------特效第一天-----------------------
51:offsetwidth/offsetheight
1: 標簽對象.offsetwidth/offsetheight
2:是一個只讀屬性，沒有px單位.可直接運算.
3:獲取的盒子的真實大小: width/height+padding+border.
4:
[圖片上傳失敗...(image-8cf329-1515936359359)]
52: 標簽對象.style.width/height.
1:僅僅能獲取/設置行內樣式.
2:獲取/設置的均是字符串,帶px單位.
3:獲取/設置的僅僅是 width.
4:
[圖片上傳失敗...(image-d3da7d-1515936359359)]
53:總結:
獲取寬度/高度的時候，用offsetWidth/offsetHeight
設置寬度/高度的時候，用style.width/style.height,記得帶px單位.且為行內式
54:parentNode與offsetParent
1:標簽對象.parentNode
標簽對象.offsetParent
2: parentNode 找父類元素.
offsetParent 找最近的有定位的父元素.如果都沒有,一直找到body.
55:標簽對象.style.left/top.
1:給定位的盒子設置偏移的量.
2:僅僅能獲取/設置行內樣式.
3:獲取/設置的均是字符串,帶px單位.
4:
[圖片上傳失敗...(image-151f37-1515936359359)]
56:標簽對象.offsetLeft/offsetTop
1: offsetLeft: 自身左側到offsetParent左側的距離：left + margin-left
offsetTop:自身頂部到offsetParent頂部的距離 : top + margin-top
2:僅僅能獲取,不能設置.且為數值類型.
3:
[圖片上傳失敗...(image-9ffdb-1515936359358)]
57:總結.
獲取操作：用offset系列
設置操作：用style.xxx進行設置。
[圖片上傳失敗...(image-92ee70-1515936359358)]
58:getComputedStyle 獲取計算后的樣式
1:標簽對象.getComputedStyle(ele,null)
2:傳入兩個參數,
第一個參數: 元素,需要獲取的標簽對象
第二個參數: 偽元素,null.
3:返回的是一個對象,后面需要.具體的屬性.
[圖片上傳失敗...(image-630c26-1515936359358)]
4:存在兼容問題:
element:獲取誰的樣式
attr: 獲取的樣式的屬性名
function getStyle(element, attr) {
//能力檢測
if(window.getComputedStyle) {
return window.getComputedStyle(element, null)[attr];
}else {
return element.currentStyle[attr];
}
}
59:節流閥步驟：
1. 定義節流閥開關
2. 判斷閥門是否打開，只有打開了才能執行
3. 關閉閥門，不讓其他人執行
4. 執行完動畫之后，打開閥門
60:三大家族.
Offset家族
Scroll家族
Client家族.
61:Offset家族.
標簽對象.offsetHeight/offsetWidth/offsetParent/offsetLeft/offsetTop
1:offset系列主要有：offsetHeight、offsetWidth、offsetParent、offsetLeft、offsetTop
2:特點:
獲取的是元素真實的高度和寬度
獲取到的是數值類型，方便計算
3:offsetHeight與offsetWidth是只讀屬性，不能設置。
offsetHeight = height + paddnig + border
offsetWidth = width + padding + border
4:與style.height/style.width區別.
只能獲取行內樣式
獲取到的是字符串類型帶px單位，需要轉換
[圖片上傳失敗...(image-71178d-1515936359357)]
62:scroll家族
(1): scroll家族用來獲取盒子內容的大小和位置
scroll家族有：scrollWidth、scrollHeight、scrollLeft、scrollTop
(2):scrollWidth與scrollHeight是盒子內容的真實的寬度和高度。與和盒子大小無關，僅僅與盒子的內容有關系。
(3):scrollTop是盒子內容被滾動條卷去的頭部的高度。scrollLeft是盒子內容被滾動條卷去的左側的寬度。
[圖片上傳失敗...(image-9b1a30-1515936359357)]
(4):onscroll事件，對于有滾動條的盒子，可以使用onscroll注冊滾動事件，每滾動一像素，就會觸發該事件。
var box = doucment.getElementById(“box”);
box.onscroll = function(){
//事件處理程序
}
:一般用來獲取scrollLeft與scrollTop.但是有兼容性的問題,將其封裝如下:
function scroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
};
}
//如何使用
console.log(scroll().top);//獲取頁面被卷去的頭部的距離
console.log(scroll().left);//獲取頁面被卷去的左側的距離
63:client家族.
(1):client家族用于獲取盒子可視區的大小
client家族有clientWidth、clientHeight、clientLeft、clientTop
(2):如果內容沒有超出盒子,clientWidth與scrollWidth相同.
[圖片上傳失敗...(image-ad542d-1515936359357)]
(3):三大家族的對比
[圖片上傳失敗...(image-6a7b14-1515936359357)]
64:onresize事件.
1:onresize事件會在窗口被調整大小的時候發生。
window.onresize = function(){
//事件處理程序
}
2:client系列一般用來獲取頁面的可視區寬高
但是存在兼容性問題,書寫兼容如下:
function client() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
};
}
65:事件對象.
1:什么是事件對象:
在觸發某個事件的時候，都會產生一個事件對象Event，這個對象中包含所有與事件相關的一些信息，包括觸發事件的元素，事件的類型以及其他與事件相關的信息。
2:獲取事件對象存在兼容性的問題.
btn.onclick = function(event){
//只要用到了事件對象，就要記得處理瀏覽器兼容性
event = event || window.event;
}
66:事件對象中屬性.
1:在事件對象中我們經常用到的是鼠標位置信息與鍵盤碼信息.
2:記錄了鼠標位置信息的相關屬性.
screenX與screenY：光標相對于屏幕左上角的水平位置與垂直位置。
clientX與clientY：光標相對于可視區左上角的水平位置和垂直位置。
pageX與pageY：光標相對于網頁（文檔document）左上角的水平位置與垂直位置（推薦使用）
[圖片上傳失敗...(image-378c05-1515936359356)]
3:記錄了鍵盤碼的屬性.
event.keyCode:鍵盤按下的那個鍵的鍵盤碼
4:pageX與pageY存在兼容性的問題.
function getPage(event) {
return {
//在IE678中使用document.documentElement.scrollLeft就可以獲取到scrollTop的值
x:event.pageX || event.clientX + document.documentElement.scrollLeft,
y:event.pageY || event.clientY + document.documentElement.scrollTop
}
}
67:on注冊事件.
1:注冊事件:
box.onclick = function(){//代碼塊}.
2:移除事件.
box.onclick = null.
3:同一個元素的同一個類型的事件,僅僅能注冊一個,注冊多個會產生覆蓋.
68:addEventListener 綁定事件
1:語法.
第一個參數：事件的類型：click mouseover
第二個參數：函數，監聽者，每次點擊，這個函數就執行。
第三個參數：false
addEventListener(type, func, useCapture);
2:如果想讓你注冊的事件能夠被移除就不能使用匿名函數.
function fn1() {
alert("hehe");
}
//如果想讓注冊的事件能移除，不能用匿名函數。
box.addEventListener("click", fn1, false);
69:removeEventListener. 移除事件.
1:要想被移除,就不能是匿名函數
2:語法:
第一個參數：參數類型
第二個參數：要移除的那個函數
第三個參數：false
removeEventListener(type, func, useCapture);
70:在IE6/7/8里面不支持addEventListener /removeEventListener.
僅僅有attachEvent與detachEvent
1:attachEvent的用法.
//type:事件類型 需要加上on onclick onmouseenter
//func:需要執行的那個事件
attachEvent(type, func)
2:detachEvent的用法.
//type:事件類型 需要加上on onclick onmouseenter
//func:需要執行的那個事件
detachEvent(type, func)
71:注冊/移除事件的封裝.
//添加事件
function addEvent(element, type, fn){
//能力檢測
if(element.addEventListener){
element.addEventListener(type, fn, false);
}else if(element.attachEvent){
element.attachEvent("on"+type, fn);
}else {
//如果都不行，那就用on方式
element["on"+type] = fn;
}
}
//移除事件
function removeEvent(element, type, fn) {
if(element.removeEventListener){
element.removeEventListener(type, fn, false);
}else if(element.detachEvent){
element.detachEvent("on"+type, fn);
}else {
element["on"+type] = null;
}
}
72:常見的鼠標事件.
onmousedown:鼠標按下事件
onmouseup:鼠標彈起事件
onclick:單擊事件
ondblclick：雙擊事件
onmouseover：鼠標經過事件
onmouseout：鼠標離開事件
onmousemove：鼠標移動事件
onfocus：鼠標獲得焦點事件
onblur：鼠標失去焦點事件
73:常見的鍵盤事件.
onkeydown:鍵盤按下時觸發
onkeyup:鍵盤彈起時觸發
對于鼠標事件，事件對象中有一系列的XY記錄了鼠標的位置信息。而鍵盤事件中，事件對象有一個event.keyCode屬性，記錄了按下去的鍵的鍵盤碼.
74:正則表達式在筆記本與特效第五天的筆記上.
