事件BOM DOM

1.事件

1.1 事件綁定

# 1.寫在html元素中 <button onclick='code'></button> # 2.把事件看成元素對象的方法 btnEle.onclick=function(){ code... } # 3.事件監聽 btnEle.addEventListener('click',function(){ },false) false表示冒泡階段觸發(默認) 

1.2 事件的捕獲和冒泡

捕獲階段：從祖元素到子元素 冒泡階段：從子元素到祖元素 事件默認在冒泡階段觸發 

1.3 經常使用事件

# 鼠標事件 click 單擊 dblclick 雙擊 contextmenu 右擊 mouseover/mouseenter 鼠標懸停 mouseout/mouseleave 鼠標離開 mousedown 鼠標按下 mouseup 鼠標擡起 mousemove 鼠標移動 # 鍵盤事件 keydown 鍵盤按鍵按下 keyup 鍵盤按鍵擡起 keypress 按鍵按下，只有可輸入的按鍵才能觸發 # 表單事件 blur 失去焦點 focus 得到焦點 submit 提交 綁定給form元素 reset 重置 綁定給form元素 select 輸入框內容被選中 change 內容改變且失去焦點 適合select選項更改，觸發 input 輸出內容改變 觸發 # 文檔事件 load 綁定給body 綁定給window 綁定給 img 、link、script 文檔加載完成 unload 文檔關閉 beforeunload 文檔關閉以前 # 圖片事件 load 圖片加載完畢 error 圖片加載錯誤 abort 圖片加載中斷 # 其餘事件 scroll 滾動 resize 大小調整 

1.4 Event對象 事件對象

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

2.BOM瀏覽器對象模型

2.1 window

# 屬性 window.innerWidth 窗口的寬 window.innerHeight 窗口的高 history location screen navigator # 方法 setInterval() clearInterval() setTimeout() clearTimeout() Number() String() Boolean() alert() confirm() prompt() ... 

2.2 history

屬性 length 方法 back() 退後一步 forward() 前進一步 go() 前進/後退n步 

2.3 location

屬性 href 地址 protocol 協議 host 主機名和端口 hostname 主機名 port 端口 pathname 路徑名 search url中？後面 hash 錨點 

2.4 screen

屏幕 

2.5 navigator

userAgent 查看用的是什麼瀏覽器 

3. DOM文檔對象模型

3.1 常見的dom對象

全部的元素對象 都是dom document 表示整個文檔 document.body 獲取body元素 document.documentElement 獲取HTML元素 

3.2 元素內容

innerHTML innerText