使用事件的基本結構：事件源+事件類型=執行的指令
事件源
事件
事件處理程序
事件源
事件類型
驅動程序----匿名函數
事件
onclick:鼠標單擊
ondblckick:雙擊鼠標
onkeyup:按下并釋放鍵盤上的一個鍵是出發
onchange:文本內容或下拉菜單中的選項發生改變
onfocus:獲得焦點,表示文本框等獲得鼠標光標
onblur:失去焦點,表示文本框等失去鼠標光標
onmouseover:鼠標移除.即鼠標停留在圖片等的上方
onmouseout:鼠標移除,即離開圖片等所在的區域
onload:網頁文檔加載事件
onunload:關閉網頁時
onsubmit:表單提交事件
案例
東京廣告欄
京東狗
JS的三個組成部分
核心（ECMAScript）歐洲計算機制造商協會
描述了JS的語法和基本對象。
文檔對象模型（DOM）
處理網頁內容的方法和接口
瀏覽器對象模型（BOM）
與瀏覽器交互的方法和接口
1、什么是DOM和節點
由結構圖中我們可以看到，整個文檔就是一個文檔節點。
而每一個HMTL標簽都是一個元素節點。
標簽中的文字則是文字節點。
標簽的屬性是屬性節點。
一切都是節點……
2、獲取節點
直接獲取
訪問關系獲取
操作節點，必須首先找到該元素。有三種方法來做這件事：
通過 id 找到 HTML 元素
document.getElementById("demo");
通過標簽名找到 HTML 元素
document.getElementsByTagName("div")
通過類名找到 HTML 元素
document.getElementsByClassName("a");
通過類名查找 HTML 元素在 IE 5,6,7,8 中無效
3、節點操作(3種)
節點的創建、添加、刪除
1.創建節點
createElement()
var createDiv = document.createElement("div");
2.插入節點
1.appendChild（）
appendChild() 方法向節點添加最后一個子節點
3.插入子節點
2.insertBefore(插入的節點，參照節點)
insertBefore() 方法 ，如果不是在末尾插入節點，而是想放在特定的位置上，用這個方法.
該方法接受2個參數，第一個是要插入的節點，第二個是參照節點。如果 第二個參數 為null（不是不寫），則默認插入到后面
可以給某個id 的前面
刪除節點
removeChild（）
父節點.removeChild（子節點）；
不知道父級的情況下，可以這么寫：node.parentNode.removeChild(node)
復制節點
cloneNode()
var newNode = oldNode.cloneNode() ;
用于復制節點， 接受一個布爾值參數， true 表示深復制（復制節點及其所有子節點）， false 表示淺復制（復制節點本身，不復制子節點）
社直接點屬性
獲?。篻etAttribute(名稱)
設置：setAttribute(名稱, 值)
刪除：removeAttribute(名稱)
4、屬性操作（2種）
getAttribute()/setAttribute()/removeAttribute()
節點中的父子兄弟訪問關系
父節點
parentNode
兄弟節點
nextSibling
nextElementSibling
previousSibling
previousElementSibling
子節點
firstChild
firstElementChild
lastChild
lastElementChild
所有子節點
childNodes
children
childNodes和children區別
childNodes：它是標準屬性，它返回指定元素的子元素集合，包括HTML節點，所有屬性，文本節點
火狐 谷歌等高本版會把換行也看做是子節點
nodeType==1時才是元素節點
nodeType == 1 表示 的是 元素節點 記住 元素就是標簽
nodeType == 2 表示是屬性節點 了解
nodeType == 3 是文本節點 了解
children：非標準屬性，它返回指定元素的子元素集合。
但它只返回HTML節點，甚至不返回文本節點，雖然不是標準的DOM屬性，但它和innerHTML方法一樣，得到了幾乎所有瀏覽器的支持。
children在IE6/7/8中包含注釋節點
獲得所有的兄弟節點
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() //根據id屬性獲取一個DOM對象，區分大小寫，符合代碼規范
getElementsByTagName() //根據標簽返回多個DOM對象
HTML-DOM—僅僅能夠用在HTML文檔中
getElementsByName()
HTML5中新增
getElementsByClassName()
DOM對象的屬性和HTML的標簽屬性幾乎是一致的
src、title、className、href
練習：
切換圖片
點擊按鈕隱藏顯示div
關閉二維碼
美女相冊
DOM初體驗案例
1.切換圖片（a連接+圖片）
2.顯示和隱藏盒子
3.美女相冊
innerHTML—會把內容解析到DOM樹上
獲取標簽之間的內容
設置標簽之間的內容
innerText (FF中textContent)—會對內容轉義
獲取標簽之間的內容
設置標簽之間的內容
表單元素的屬性
type、value、checked、selected、disabled
練習：
點擊按鈕禁用文本框
搜索文本框
檢測用戶名是否是3-6位，密碼是否是6-8位，如果不滿足要求高亮顯示文本框
設置下拉框中的選中項（水果）
給文本框賦值，獲取文本框的值
全選反選
getAttribute()
setAttribute()
removeAttribute()
直接使用.屬性的方式不可以設置自定義屬性(IE除外)，getAttribute()什么時候都可以用，推薦使用
練習：
Tab切換
nodeType 節點的類型
1 元素節點
2 屬性節點
3 文本節點
nodeName 節點的名稱(標簽名稱)
nodeValue 節點值
元素節點的nodeValue始終是null
設置樣式的兩種方式
className
style
獲取樣式
DOM的style屬性只能獲取標簽中使用style設置的樣式，無法獲取
嵌入或外部樣式
style.cssText 獲取style里面的字符串
設置樣式
無論設置還是獲取只能操作行內式
1.樣式少的時候使用
2.style是對象（其他大部分是字符串）
3.值是字符串，沒有設置值是“”；
4.命名規則，駝峰命名。和css不一樣
5.設置了類樣式不能獲取。（只和行內式交互，和內嵌和外鏈無關）
6.box.style.cssText = “字符串形式的樣式”；
backgroundColor
backgroundImage
color
width
height
border
opacity (IE8以前filter: alpha(opacity=xx))
注意DOM對象style的屬性和標簽中style內的值不一樣，因為在JS中-不能作為標識符
backgroundColor DOM中
background-color CSS中
當前輸入的文本框高亮顯示
改變div的大小
表格隔行變色、高亮顯示（做過）
百度皮膚
顯示隱藏/關閉廣告/顯示二維碼（隱藏方法）
提高層級
隱藏顯示
display
元素隱藏后，不占位置，頁面上的元素會重新排列
visibility
元素隱藏后，占位置
hidden
visible
opacity、position
位置
position
left
top
right
bottom
z-index
練習：祝愿墻
動態創建元素的三種方式
方式一：
document.write()
方式二：
innerHTML
方式三：
createElement()
appendChild()
removeChild()
insertBefore()
replaceChild()
案例
動態創建列表，高亮顯示（四大美女）
選擇水果
模擬百度搜索文本框
動態創建在線人員列表
動態創建祝愿墻
動態創建表格
方式1
createElement()
方式2
rows (只讀，table和textarea能用)
insertRow() (只有table能調用)
deleteRow() (只有table能調用)
cells (只讀，table和textarea能用)
insertCell() (只有tr能調用)
deleteCell() (只有tr能調用)
使用onclick注冊多個事件處理程序
//注冊多個事件處理程序
function addEvent(element,event,fn) {
var oldfn = element[event];
if (typeof oldfn != "function") {
element[event] = fn;
}else{
element[event] = function() {
oldfn();
fn();
}
}
}
注冊事件的兩種方式
onclick
DOM0
幾乎所有的瀏覽器都支持
addEventListener
DOM2
現代瀏覽器支持，IE9+
可以給同一個事件注冊多個事件處理程序
可以選擇捕獲或者冒泡
IE9以前使用attachEvent
移除事件的兩種方式
element.onclick = null;
removeEventListener
IE9以前detachEvent
如果注冊的時候使用的是匿名函數，則無法移除
給多個DOM對象注冊事件的話是使用命名函數還是匿名函數？
比如 給多個文本框注冊事件，獲取文本框的值
innerHTML在清空內容的時候和事件相關的地方
addEventLisener和attachEvent
區別：
事件名稱的區別
addEventLisener中第一個參數type是click、load，不帶on
attachEvent中一個參數type是onclick、onload
this的區別
addEventLisener：事件處理程序會在當前對象的作用域運行，因此，時間處理程序的this就是當前對象
attachEvent：事件處理程序是在全局作用域下運行因此this就是window
冒泡事件
btn.addEventListener("click",handle,false);
事件捕獲
btn.addEventListener("click",handle,true);
事件對象的獲取方式
標準DOM的事件對象
在事件處理程序中傳入事件對象
IE中的事件對象
window.event
跨瀏覽器的解決方案
event = event ? event : window.event;
事件對象
獲取當前對象(只讀)
target 觸發事件的元素
currentTarget 始終是當前執行事件處理程序的對象
IE中對應的屬性 srcElement == target
事件類型(只讀)
type click、mouseover。。。
事件處于哪個階段(只讀)
eventPhase
取消默認行為
preventDefault()
IE中對應的 returnValue = false
取消冒泡和捕獲
stopPropagation() 取消冒泡和捕獲
IE中對應的 cancelBubble=true 取消冒泡(IE中不支持捕獲)
事件委托
利用事件冒泡，把多個DOM對象的事件，注冊到父容器上
鼠標事件
mousedown、mouseup、mousemove、mouseover、mouseout、click、dblclick
事件對象的屬性
clientX/clientY 所有瀏覽器都支持，窗口位置
pageX/pageY IE8以前不支持，頁面位置
screenX/screenY 屏幕位置
shiftKey/ctrlKey/altKey 同時按下組合鍵
button
案例
跟著鼠標飛的天使
鼠標點哪圖片飛到哪里
拖拽效果
彈出登錄窗口
模擬滾動條
獲取鼠標在div內的坐標
放大鏡效果
祝愿墻拖動
鍵盤事件
keydown、keypress、keyup
事件對象的屬性
keyCode 鍵盤碼，只有數字和字母對應ASCII碼
charCode 對應ASCII碼，只有keypress才有效，IE9+
案例
按回車切換到下一個文本框
按esc隱藏登錄框
檢測密碼強度
<h2>BOM</h2>
瀏覽器對象模型
window對象
window對象是JavaScript中的頂級對象
所有定義在全局作用域中的變量、函數都會變成window對象的屬性和方法
window對象下的屬性和方法調用的時候可以省略window
系統的對話框
alert() //不同瀏覽器中的外觀是不一樣的
confirm()//兼容不好
prompt() //不推薦使用
打開窗口
window.open(url,target,param)
url 要打開的地址
target新窗口的位置 _blank _self _parent(父框架)
param 新窗口的一些設置
返回值，新窗口的句柄
window.close() 關閉窗口
新窗口.moveTo(5,5) 新窗口.moveBy()
新窗口.resizeTo() window.resizeBy()
定時器
循環執行（等待時間過去之后執行）
var timerId = setInterval(code,interval);
clearInterval(timerId);
間隔時間執行，不是特別精確
定時執行（立刻執行）
var timerId = setTimeout(code,interval);
clearTimeout(timerId);
location對象
window.location
location相當于瀏覽器地址欄
可以將url解析成獨立的片段
location對象的屬性
href
hash 返回url中#后面的內容，包含#
host 主機名，包括端口
hostname 主機名
pathname url中的路徑部分
protocol 協議 一般是http、https
search 查詢字符串
location.assign() 改變瀏覽器地址欄的地址，并記錄到歷史中
設置location.href 就會調用assign()。一般使用location.href 進行頁面之間的跳轉
location.replace() 替換瀏覽器地址欄的地址，不會記錄到歷史中
location.reload() 重新加載
window.navigator 的一些屬性可以獲取客戶端的一些信息
userAgent (系統，瀏覽器)
platform (瀏覽器支持的系統，win/mac/linux)
歷史記錄管理
后退
history.back()
history.go(-1) 0是刷新
前進
history.forward()
history.go(1)
