使用事件的基本結(jié)構(gòu)：事件源+事件類型=執(zhí)行的指令
事件源
事件
事件處理程序

事件源
事件類型
驅(qū)動(dòng)程序----匿名函數(shù)

事件

onclick:鼠標(biāo)單擊
ondblckick:雙擊鼠標(biāo)
onkeyup:按下并釋放鍵盤上的一個(gè)鍵是出發(fā)
onchange:文本內(nèi)容或下拉菜單中的選項(xiàng)發(fā)生改變
onfocus:獲得焦點(diǎn),表示文本框等獲得鼠標(biāo)光標(biāo)
onblur:失去焦點(diǎn),表示文本框等失去鼠標(biāo)光標(biāo)
onmouseover:鼠標(biāo)移除.即鼠標(biāo)停留在圖片等的上方
onmouseout:鼠標(biāo)移除,即離開圖片等所在的區(qū)域
onload:網(wǎng)頁文檔加載事件
onunload:關(guān)閉網(wǎng)頁時(shí)
onsubmit:表單提交事件

案例
東京廣告欄

京東狗

JS的三個(gè)組成部分
核心（ECMAScript）歐洲計(jì)算機(jī)制造商協(xié)會(huì)
描述了JS的語法和基本對(duì)象茂卦。
文檔對(duì)象模型（DOM）
處理網(wǎng)頁內(nèi)容的方法和接口
瀏覽器對(duì)象模型（BOM）
與瀏覽器交互的方法和接口

1、什么是DOM和節(jié)點(diǎn)
由結(jié)構(gòu)圖中我們可以看到，整個(gè)文檔就是一個(gè)文檔節(jié)點(diǎn)。
而每一個(gè)HMTL標(biāo)簽都是一個(gè)元素節(jié)點(diǎn)。
標(biāo)簽中的文字則是文字節(jié)點(diǎn)妒潭。
標(biāo)簽的屬性是屬性節(jié)點(diǎn)隐锭。
一切都是節(jié)點(diǎn)……
2晒杈、獲取節(jié)點(diǎn)

直接獲取
訪問關(guān)系獲取
操作節(jié)點(diǎn)柑贞，必須首先找到該元素方椎。有三種方法來做這件事：
通過 id 找到 HTML 元素
document.getElementById("demo");
通過標(biāo)簽名找到 HTML 元素
document.getElementsByTagName("div")
通過類名找到 HTML 元素
document.getElementsByClassName("a");
通過類名查找 HTML 元素在 IE 5,6,7,8 中無效

3、節(jié)點(diǎn)操作(3種)
節(jié)點(diǎn)的創(chuàng)建钧嘶、添加棠众、刪除

1.創(chuàng)建節(jié)點(diǎn)
createElement()
var createDiv = document.createElement("div");
2.插入節(jié)點(diǎn)
1.appendChild（）
appendChild() 方法向節(jié)點(diǎn)添加最后一個(gè)子節(jié)點(diǎn)
3.插入子節(jié)點(diǎn)
2.insertBefore(插入的節(jié)點(diǎn)，參照節(jié)點(diǎn)) 
insertBefore() 方法 有决，如果不是在末尾插入節(jié)點(diǎn)闸拿，而是想放在特定的位置上，用這個(gè)方法.
該方法接受2個(gè)參數(shù)书幕，第一個(gè)是要插入的節(jié)點(diǎn)新荤，第二個(gè)是參照節(jié)點(diǎn)。如果 第二個(gè)參數(shù) 為null（不是不寫）按咒，則默認(rèn)插入到后面
可以給某個(gè)id 的前面

刪除節(jié)點(diǎn)

removeChild（）
父節(jié)點(diǎn).removeChild（子節(jié)點(diǎn)）迟隅；

不知道父級(jí)的情況下，可以這么寫：node.parentNode.removeChild(node)

復(fù)制節(jié)點(diǎn)
cloneNode() 
var  newNode = oldNode.cloneNode() ;

用于復(fù)制節(jié)點(diǎn)励七， 接受一個(gè)布爾值參數(shù)智袭， true 表示深復(fù)制（復(fù)制節(jié)點(diǎn)及其所有子節(jié)點(diǎn)）， false 表示淺復(fù)制（復(fù)制節(jié)點(diǎn)本身掠抬，不復(fù)制子節(jié)點(diǎn)）

社直接點(diǎn)屬性
獲群鹨啊：getAttribute(名稱)
設(shè)置：setAttribute(名稱, 值)
刪除：removeAttribute(名稱)

4、屬性操作（2種）

getAttribute()/setAttribute()/removeAttribute()

節(jié)點(diǎn)中的父子兄弟訪問關(guān)系

父節(jié)點(diǎn)
parentNode
兄弟節(jié)點(diǎn)
nextSibling
nextElementSibling
previousSibling
previousElementSibling
子節(jié)點(diǎn)
firstChild 
firstElementChild
lastChild
lastElementChild 
所有子節(jié)點(diǎn)
childNodes
children

childNodes和children區(qū)別

childNodes：它是標(biāo)準(zhǔn)屬性两波，它返回指定元素的子元素集合瞳步，包括HTML節(jié)點(diǎn)，所有屬性腰奋，文本節(jié)點(diǎn)
火狐 谷歌等高本版會(huì)把換行也看做是子節(jié)點(diǎn)
nodeType==1時(shí)才是元素節(jié)點(diǎn)
      nodeType  ==  1  表示 的是 元素節(jié)點(diǎn)      記住   元素就是標(biāo)簽
      nodeType  ==  2  表示是屬性節(jié)點(diǎn)   了解
      nodeType  ==  3  是文本節(jié)點(diǎn)   了解

children：非標(biāo)準(zhǔn)屬性单起，它返回指定元素的子元素集合。
但它只返回HTML節(jié)點(diǎn)劣坊，甚至不返回文本節(jié)點(diǎn)嘀倒，雖然不是標(biāo)準(zhǔn)的DOM屬性，但它和innerHTML方法一樣局冰，得到了幾乎所有瀏覽器的支持测蘑。
children在IE6/7/8中包含注釋節(jié)點(diǎn) 

獲得所有的兄弟節(jié)點(diǎn)

function siblings(elm) {
        var a = [];
        var p = elm.parentNode.children;
        for(var i =0,pl= p.length;i<pl;i++) {
            if(p[i] !== elm) a.push(p[i]);
        }
        return a;
}

DOMCore—可以用在任何DOM文檔中

getElementById()  //根據(jù)id屬性獲取一個(gè)DOM對(duì)象，區(qū)分大小寫康二，符合代碼規(guī)范
getElementsByTagName()  //根據(jù)標(biāo)簽返回多個(gè)DOM對(duì)象
HTML-DOM—僅僅能夠用在HTML文檔中
getElementsByName()
HTML5中新增
getElementsByClassName()

DOM對(duì)象的屬性和HTML的標(biāo)簽屬性幾乎是一致的

src碳胳、title、className沫勿、href

練習(xí)：
切換圖片
點(diǎn)擊按鈕隱藏顯示div
關(guān)閉二維碼
美女相冊(cè)
DOM初體驗(yàn)案例
1.切換圖片（a連接+圖片）
2.顯示和隱藏盒子
3.美女相冊(cè)

innerHTML—會(huì)把內(nèi)容解析到DOM樹上
獲取標(biāo)簽之間的內(nèi)容
設(shè)置標(biāo)簽之間的內(nèi)容
innerText (FF中textContent)—會(huì)對(duì)內(nèi)容轉(zhuǎn)義
獲取標(biāo)簽之間的內(nèi)容
設(shè)置標(biāo)簽之間的內(nèi)容

表單元素的屬性

type挨约、value味混、checked、selected诫惭、disabled

練習(xí)：
點(diǎn)擊按鈕禁用文本框
搜索文本框
檢測(cè)用戶名是否是3-6位惜傲，密碼是否是6-8位，如果不滿足要求高亮顯示文本框
設(shè)置下拉框中的選中項(xiàng)（水果）
給文本框賦值贝攒，獲取文本框的值
全選反選

getAttribute()
setAttribute()
removeAttribute()

直接使用.屬性的方式不可以設(shè)置自定義屬性(IE除外)，getAttribute()什么時(shí)候都可以用时甚，推薦使用
練習(xí)：
Tab切換

nodeType 節(jié)點(diǎn)的類型

1  元素節(jié)點(diǎn)
2 屬性節(jié)點(diǎn)
3 文本節(jié)點(diǎn) 
nodeName        節(jié)點(diǎn)的名稱(標(biāo)簽名稱)
nodeValue       節(jié)點(diǎn)值
元素節(jié)點(diǎn)的nodeValue始終是null

設(shè)置樣式的兩種方式

className
style

獲取樣式

DOM的style屬性只能獲取標(biāo)簽中使用style設(shè)置的樣式隘弊，無法獲取

嵌入或外部樣式

style.cssText 獲取style里面的字符串

設(shè)置樣式

無論設(shè)置還是獲取只能操作行內(nèi)式

1.樣式少的時(shí)候使用
2.style是對(duì)象（其他大部分是字符串）
3.值是字符串，沒有設(shè)置值是“”荒适；
4.命名規(guī)則梨熙，駝峰命名。和css不一樣
5.設(shè)置了類樣式不能獲取刀诬。（只和行內(nèi)式交互咽扇，和內(nèi)嵌和外鏈無關(guān)）
6.box.style.cssText = “字符串形式的樣式”；

backgroundColor
backgroundImage
color
width
height
border
opacity (IE8以前filter: alpha(opacity=xx))
注意DOM對(duì)象style的屬性和標(biāo)簽中style內(nèi)的值不一樣陕壹，因?yàn)樵贘S中-不能作為標(biāo)識(shí)符
backgroundColor       DOM中
background-color    CSS中

當(dāng)前輸入的文本框高亮顯示
改變div的大小
表格隔行變色质欲、高亮顯示（做過）
百度皮膚
顯示隱藏/關(guān)閉廣告/顯示二維碼（隱藏方法）
提高層級(jí)

隱藏顯示
display
元素隱藏后，不占位置糠馆，頁面上的元素會(huì)重新排列
visibility
元素隱藏后嘶伟，占位置
hidden
visible
opacity、position

位置

position
left
top
right
bottom
z-index

練習(xí)：祝愿墻

動(dòng)態(tài)創(chuàng)建元素的三種方式

方式一：
document.write()
方式二：
innerHTML
方式三：
createElement()
appendChild()
removeChild()
insertBefore()
replaceChild()

案例
動(dòng)態(tài)創(chuàng)建列表又碌，高亮顯示（四大美女）
選擇水果
模擬百度搜索文本框
動(dòng)態(tài)創(chuàng)建在線人員列表
動(dòng)態(tài)創(chuàng)建祝愿墻

動(dòng)態(tài)創(chuàng)建表格

方式1
createElement()
方式2
rows                          (只讀九昧，table和textarea能用)
insertRow()              (只有table能調(diào)用)
deleteRow()           (只有table能調(diào)用)
cells                 (只讀，table和textarea能用)
insertCell()               (只有tr能調(diào)用)
deleteCell()              (只有tr能調(diào)用)

使用onclick注冊(cè)多個(gè)事件處理程序

   //注冊(cè)多個(gè)事件處理程序
    function addEvent(element,event,fn) {
            var oldfn = element[event];
            if (typeof oldfn != "function") {
                element[event] = fn;
            }else{
                element[event] = function() {
                    oldfn();
                    fn();
                }
            }
        }

注冊(cè)事件的兩種方式

onclick
DOM0
幾乎所有的瀏覽器都支持
addEventListener
DOM2
現(xiàn)代瀏覽器支持毕匀，IE9+
可以給同一個(gè)事件注冊(cè)多個(gè)事件處理程序
可以選擇捕獲或者冒泡
IE9以前使用attachEvent

移除事件的兩種方式

element.onclick = null;
removeEventListener
IE9以前detachEvent
如果注冊(cè)的時(shí)候使用的是匿名函數(shù)铸鹰，則無法移除

給多個(gè)DOM對(duì)象注冊(cè)事件的話是使用命名函數(shù)還是匿名函數(shù)？
比如 給多個(gè)文本框注冊(cè)事件皂岔，獲取文本框的值

innerHTML在清空內(nèi)容的時(shí)候和事件相關(guān)的地方

addEventLisener和attachEvent

區(qū)別：
事件名稱的區(qū)別
addEventLisener中第一個(gè)參數(shù)type是click蹋笼、load，不帶on
attachEvent中一個(gè)參數(shù)type是onclick凤薛、onload
this的區(qū)別
addEventLisener：事件處理程序會(huì)在當(dāng)前對(duì)象的作用域運(yùn)行姓建，因此，時(shí)間處理程序的this就是當(dāng)前對(duì)象
attachEvent：事件處理程序是在全局作用域下運(yùn)行因此this就是window

冒泡事件
btn.addEventListener("click",handle,false);
事件捕獲
btn.addEventListener("click",handle,true);
事件對(duì)象的獲取方式

標(biāo)準(zhǔn)DOM的事件對(duì)象
在事件處理程序中傳入事件對(duì)象
IE中的事件對(duì)象
window.event
跨瀏覽器的解決方案
event = event ? event : window.event;

事件對(duì)象
獲取當(dāng)前對(duì)象(只讀)
target 觸發(fā)事件的元素
currentTarget 始終是當(dāng)前執(zhí)行事件處理程序的對(duì)象
IE中對(duì)應(yīng)的屬性 srcElement == target
事件類型(只讀)
type click缤苫、mouseover速兔。。活玲。
事件處于哪個(gè)階段(只讀)
eventPhase

取消默認(rèn)行為
preventDefault()
IE中對(duì)應(yīng)的 returnValue = false
取消冒泡和捕獲
stopPropagation() 取消冒泡和捕獲
IE中對(duì)應(yīng)的 cancelBubble=true 取消冒泡(IE中不支持捕獲)
事件委托
利用事件冒泡涣狗，把多個(gè)DOM對(duì)象的事件谍婉，注冊(cè)到父容器上

鼠標(biāo)事件
mousedown、mouseup镀钓、mousemove穗熬、mouseover、mouseout丁溅、click唤蔗、dblclick
事件對(duì)象的屬性
clientX/clientY 所有瀏覽器都支持，窗口位置
pageX/pageY IE8以前不支持窟赏，頁面位置
screenX/screenY 屏幕位置
shiftKey/ctrlKey/altKey 同時(shí)按下組合鍵
button

案例
跟著鼠標(biāo)飛的天使
鼠標(biāo)點(diǎn)哪圖片飛到哪里
拖拽效果
彈出登錄窗口
模擬滾動(dòng)條
獲取鼠標(biāo)在div內(nèi)的坐標(biāo)
放大鏡效果
祝愿墻拖動(dòng)

鍵盤事件
keydown妓柜、keypress、keyup
事件對(duì)象的屬性
keyCode 鍵盤碼涯穷，只有數(shù)字和字母對(duì)應(yīng)ASCII碼
charCode 對(duì)應(yīng)ASCII碼棍掐，只有keypress才有效，IE9+
案例
按回車切換到下一個(gè)文本框
按esc隱藏登錄框
檢測(cè)密碼強(qiáng)度
<h2>BOM</h2>

瀏覽器對(duì)象模型
window對(duì)象
window對(duì)象是JavaScript中的頂級(jí)對(duì)象
所有定義在全局作用域中的變量拷况、函數(shù)都會(huì)變成window對(duì)象的屬性和方法
window對(duì)象下的屬性和方法調(diào)用的時(shí)候可以省略window

系統(tǒng)的對(duì)話框

alert() //不同瀏覽器中的外觀是不一樣的
confirm()//兼容不好
prompt()    //不推薦使用

打開窗口

window.open(url,target,param)
url 要打開的地址
target新窗口的位置 _blank  _self  _parent(父框架)
param 新窗口的一些設(shè)置
返回值作煌，新窗口的句柄
window.close()  關(guān)閉窗口
新窗口.moveTo(5,5)    新窗口.moveBy()
新窗口.resizeTo()   window.resizeBy()

定時(shí)器

循環(huán)執(zhí)行（等待時(shí)間過去之后執(zhí)行）
var timerId = setInterval(code,interval);
clearInterval(timerId);
間隔時(shí)間執(zhí)行，不是特別精確

定時(shí)執(zhí)行（立刻執(zhí)行）
var timerId = setTimeout(code,interval);
clearTimeout(timerId);

location對(duì)象

window.location
location相當(dāng)于瀏覽器地址欄
可以將url解析成獨(dú)立的片段
location對(duì)象的屬性
href
hash   返回url中#后面的內(nèi)容赚瘦，包含#
host    主機(jī)名粟誓，包括端口
hostname   主機(jī)名
pathname     url中的路徑部分
protocol    協(xié)議 一般是http、https
search       查詢字符串


location.assign()    改變?yōu)g覽器地址欄的地址起意，并記錄到歷史中
設(shè)置location.href  就會(huì)調(diào)用assign()努酸。一般使用location.href 進(jìn)行頁面之間的跳轉(zhuǎn)
location.replace()  替換瀏覽器地址欄的地址，不會(huì)記錄到歷史中
location.reload()    重新加載

window.navigator 的一些屬性可以獲取客戶端的一些信息
userAgent    (系統(tǒng)杜恰，瀏覽器)
platform       (瀏覽器支持的系統(tǒng)获诈，win/mac/linux)

歷史記錄管理
后退
history.back()
history.go(-1)    0是刷新
前進(jìn)
history.forward()
history.go(1)