鼠標事件
onmousedown, onmouseup, onclick, ondbclick, onmousewheel, onmousemove, onmouseover, onmouseout
觸摸事件
ontouchstart, ontouchend, ontouchmove
鍵盤事件:
onkeydown, onkeyup, onkeypress
頁面相關事件:
onload, onmove(瀏覽器窗口被移動時觸發), onresize(瀏覽器的窗口大小被改變時觸發), onscroll(滾動條位置發生變化時觸發)
表單相關事件
onblur(元素失去焦點時觸發), onchange(元素失去焦點且元素內容發生改變時觸發), onfocus(元素獲得焦點時觸發), onreset(表單中reset屬性被激活時觸發), onsubmit(表單被提交時觸發);oninput(在input元素內容修改后立即被觸發,兼容IE9+)
編輯事件
onbeforecopy:當頁面當前的被選擇內容將要復制到瀏覽者系統的剪貼板前觸發此事件;
onbeforecut:當頁面中的一部分或者全部的內容將被移離當前頁面[剪貼]并移動到瀏覽者的系統剪貼板時觸發此事件;
onbeforeeditfocus:當前元素將要進入編輯狀態;
onbeforepaste:內容將要從瀏覽者的系統剪貼板傳送[粘貼]到頁面中時觸發此事件;
onbeforeupdate:當瀏覽者粘貼系統剪貼板中的內容時通知目標對象;
oncontextmenu:當瀏覽者按下鼠標右鍵出現菜單時或者通過鍵盤的按鍵觸發頁面菜單時觸發的事件;
oncopy:當頁面當前的被選擇內容被復制后觸發此事件;
oncut:當頁面當前的被選擇內容被剪切時觸發此事件;
onlosecapture:當元素失去鼠標移動所形成的選擇焦點時觸發此事件;
onpaste:當內容被粘貼時觸發此事件;
onselect:當文本內容被選擇時的事件;
onselectstart:當文本內容選擇將開始發生時觸發的事件;
拖動事件
ondrag:當某個對象被拖動時觸發此事件 [活動事件];
ondragdrop:一個外部對象被鼠標拖進當前窗口時觸發;
ondragend:當鼠標拖動結束時觸發此事件;
ondragenter:當對象被鼠標拖動的對象進入其容器范圍內時觸發此事件;
ondragleave:當對象被鼠標拖動的對象離開其容器范圍內時觸發此事件;
ondragover:當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件;
ondragstart:當某對象將被拖動時觸發此事件;
ondrop:在一個拖動過程中,釋放鼠標鍵時觸發此事件;
自定義事件
var EventCenter = {
on: function(type, handler){
document.addEventListener(type, handler)
},
fire: function(type, data){
return document.dispatchEvent(new CustomEvent(type, {
detail: data
}))
}
}
EventCenter.on('hello', function(e){
console.log(e.detail)
})
EventCenter.fire('hello', '你好')