Style
Event介紹
使用Event
CSS也被表示在DOM中
使用Attribute的列表表示
CSS使用小寫和減號
JS使用大小寫
將減號後面的英文改為大寫
font-family
fontFamily
list-style-image
listStyleImage
唯一的例外...
float
cssFloat
var pcd=document.getElementById('pcd').style
pcd.getPropertyValue("font-family")
pcd.fontFamily
pcd["font-family"]
var st=document.getElementById('TAT').style
st.setProperty("color","red")
st.color="blue"
st["color"]="green"
動態網頁不可少的Event
李組長眉頭一皺 發現執行並不單純
DOM讓JS可以對HTML元素定義handler
在事件觸發時可以執行特定指令
onclick/ondbclick
oncontextmenu
onmousemove
onmousedown/onmouseup
onmouseover/onmouseout
可以藉由把oncontextmenu="return false"鎖右鍵
不過我都用火狐娘一鍵停用JS
有些網站會在頁面上放個透明的大div蓋住頁面
然後你按下滑鼠就是幫忙按讚...
MouseEvent物件的屬性
alyKey/ctrlKey/shiftKey
clientX/clientY
screenX/screenY
onkeydown
onkeypress
onkeyup
KeyboardEvent物件的屬性
alyKey/ctrlKey/shiftKey
charCode/key/keyCode
onabort
onerror
onload
onresize
圖片載入失敗也可以註冊事件
然後忘了過濾就發生了XSS很不方便
onblur/onfocus
onchange
oninput
onreset
onsearch
onsubmit
ondrag
ondragend
ondragenter/ondragleave/ondragover
ondragstart
ondrop
oncopy
oncut
onpaste
IE可以存取剪貼簿內容
貼上前請看看你複製的內容是否正確...
你說你沒在用IE? 那就沒事了
oncanpolay
onended
onerror
onpause/onplay
onseeking
此事件和CSS的animation有關
animationend
animationiteration
animationstart
AnimationEvent物件的屬性
animationName
elapsedTime
此事件和CSS的transition有關
transitionend
TransitionEvent物件的屬性
propertyName
elapsedTime
講解Event在HTML中的使用
可以在HTML的元素中給予屬性
利用JS對指定物件註冊事件
可以註冊或取消事件
element.addEventListener(event,func,useCapture)
element.removeEventListener(event,func,useCapture)
event為字串 不用加"on"
func為函式 可為匿名函式
useCapture為觸發順序 可以暫且不管他
一個元素可以在同一個事件觸發多個函式
使用匿名函式的話要取消註冊很麻煩
儘量使用有名字的函式來註冊事件
有了Event的基本觀念就能寫動態網頁
還有XSS