一 .事件

1.1 事件繫結

# 寫在html元素中
<button onclick = 'code...'> </button>

#把事件當作元素物件的方法(更常用)
btnEle.onclick = function(){
	
}

#事件監聽
btnEle.addEventListener('click',function(){
    
},flase)  flase表示冒泡階段觸發(預設),改成true就是在捕獲階段觸發

1.2 事件的捕獲和冒泡

捕獲階段:從祖先元素到子元素
冒泡階段:從子元素到祖先元素
事件預設在冒泡階段觸發

1.3 常用事件

#滑鼠事件
click		單擊
dblclick	雙擊
contextmenu 右擊
mouseenter  mouseover  滑鼠懸停
mouseleave  mouseout   滑鼠離開
mousedown	滑鼠按鍵按下
mouseup		滑鼠按鍵擡起
mousemove	滑鼠移動
#鍵盤事件
keydown		鍵盤按鍵按下
keyup		鍵盤按鍵擡起
keypress	鍵盤按鍵按下,
 
只有可輸入的按鍵才能觸發

#表單事件
blur		失去焦點
focus		獲取焦點
submit		提交,繫結給form元素
reset		重置,繫結給form元素
select		輸入框內容被選中
change		內容改變且失去焦點,適合sselect選項修改觸發
input		輸入內容改變觸發

#文件事件
load			繫結給body,window,img,link,script    文件載入完成
unload			文件關閉
beforeunload	文件關閉之前

#圖片事件
load		圖片載入完畢
error		圖片載入錯誤
abort		圖片載入中斷

#其他事件
scroll		滾動        scrollY
resize		大小調整
 

1.4 Event物件 事件物件

屬性
clientX		滑鼠的座標
clientY		滑鼠的座標
keyCode		鍵盤的按鍵   ascii碼
button		滑鼠按鍵  0  1  2
target		返回元素   具體觸發的元素
方法
stopPropagation()		阻止事件冒泡
preventDefault()		阻止元素的預設事件

二.BOM瀏覽器物件模型

2.1 window

屬性
window.innerwidth	視窗的寬
window.innerheight	視窗的高
history
location
screen
navigator

方法
setInterval
 
()
clearInterval()
setTimeout()
clearTimeout()
Number()
String()
Boolean()
alert()
confirm()
prompt()

所有的全域性物件都是window的屬性

2.2 history

屬性

• length

方法

• back() 後退一步

• forward() 前進一步

• go(n) 前進/後退 n 步

2.3 location(url的資訊)

屬性

• href
• protocol 協議
• host 主機與埠
• hostname 主機名
• port 埠名
• pathname 路徑
• search
• hash 錨點

2.4 screen(螢幕)

2.5 navigator

屬性

• userAgent 看用的是什麼瀏覽器,得到瀏覽器資訊

三.DOM(文件物件模型)

3.1 常見的dom物件

所有的元素物件都是dom
document   dom物件   整個文件
document.body	獲取body元素
document.documentElement	獲取html元素

3.2 元素內容

innerHTML    	得到整個標籤
innerText		得到標籤裡面的內容

3.3 結構關係

• parentElement 父元素 大部分情況下 parentElement 等同於 parentNode
• children 所有子元素的集合
• firstElementChild IE9+ 第一個子元素
• lastElementChild IE9+ 最後一個子元素
• nextElementSibling IE9+ 下一個兄弟元素
• previousElementSibling IE9+ 上一個兄弟元素
• childElementCount IE9+ 子元素的數量
• ownerDocument 返回元素所屬的文件物件