鼠標(biāo)事件

onmousedown, onmouseup, onclick, ondbclick, onmousewheel, onmousemove, onmouseover, onmouseout

觸摸事件

ontouchstart, ontouchend, ontouchmove

鍵盤事件：

onkeydown, onkeyup, onkeypress

頁面相關(guān)事件：

onload, onmove(瀏覽器窗口被移動(dòng)時(shí)觸發(fā)), onresize(瀏覽器的窗口大小被改變時(shí)觸發(fā)), onscroll(滾動(dòng)條位置發(fā)生變化時(shí)觸發(fā))

表單相關(guān)事件

onblur(元素失去焦點(diǎn)時(shí)觸發(fā)), onchange(元素失去焦點(diǎn)且元素內(nèi)容發(fā)生改變時(shí)觸發(fā)), onfocus(元素獲得焦點(diǎn)時(shí)觸發(fā)), onreset(表單中reset屬性被激活時(shí)觸發(fā)), onsubmit(表單被提交時(shí)觸發(fā))；oninput(在input元素內(nèi)容修改后立即被觸發(fā)，兼容IE9+)

編輯事件

onbeforecopy：當(dāng)頁面當(dāng)前的被選擇內(nèi)容將要復(fù)制到瀏覽者系統(tǒng)的剪貼板前觸發(fā)此事件；

onbeforecut：當(dāng)頁面中的一部分或者全部的內(nèi)容將被移離當(dāng)前頁面[剪貼]并移動(dòng)到瀏覽者的系統(tǒng)剪貼板時(shí)觸發(fā)此事件；

onbeforeeditfocus：當(dāng)前元素將要進(jìn)入編輯狀態(tài)；

onbeforepaste：內(nèi)容將要從瀏覽者的系統(tǒng)剪貼板傳送[粘貼]到頁面中時(shí)觸發(fā)此事件；

onbeforeupdate：當(dāng)瀏覽者粘貼系統(tǒng)剪貼板中的內(nèi)容時(shí)通知目標(biāo)對(duì)象；

oncontextmenu：當(dāng)瀏覽者按下鼠標(biāo)右鍵出現(xiàn)菜單時(shí)或者通過鍵盤的按鍵觸發(fā)頁面菜單時(shí)觸發(fā)的事件；

oncopy：當(dāng)頁面當(dāng)前的被選擇內(nèi)容被復(fù)制后觸發(fā)此事件；

oncut：當(dāng)頁面當(dāng)前的被選擇內(nèi)容被剪切時(shí)觸發(fā)此事件；

onlosecapture：當(dāng)元素失去鼠標(biāo)移動(dòng)所形成的選擇焦點(diǎn)時(shí)觸發(fā)此事件；

onpaste：當(dāng)內(nèi)容被粘貼時(shí)觸發(fā)此事件；

onselect：當(dāng)文本內(nèi)容被選擇時(shí)的事件；

onselectstart：當(dāng)文本內(nèi)容選擇將開始發(fā)生時(shí)觸發(fā)的事件；

拖動(dòng)事件

ondrag：當(dāng)某個(gè)對(duì)象被拖動(dòng)時(shí)觸發(fā)此事件 [活動(dòng)事件]；

ondragdrop：一個(gè)外部對(duì)象被鼠標(biāo)拖進(jìn)當(dāng)前窗口時(shí)觸發(fā)；

ondragend：當(dāng)鼠標(biāo)拖動(dòng)結(jié)束時(shí)觸發(fā)此事件；

ondragenter：當(dāng)對(duì)象被鼠標(biāo)拖動(dòng)的對(duì)象進(jìn)入其容器范圍內(nèi)時(shí)觸發(fā)此事件；

ondragleave：當(dāng)對(duì)象被鼠標(biāo)拖動(dòng)的對(duì)象離開其容器范圍內(nèi)時(shí)觸發(fā)此事件；

ondragover：當(dāng)某被拖動(dòng)的對(duì)象在另一對(duì)象容器范圍內(nèi)拖動(dòng)時(shí)觸發(fā)此事件；

ondragstart：當(dāng)某對(duì)象將被拖動(dòng)時(shí)觸發(fā)此事件；

ondrop：在一個(gè)拖動(dòng)過程中，釋放鼠標(biāo)鍵時(shí)觸發(fā)此事件；

自定義事件

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', '你好')