dom js声明事件和触发事件的方式

onxxx内联绑定事件方式

<div id="btn" onclick="doHandler">
   <h2>使用onclick绑定事件方式</h2>
</div>

function doHandler(event){
// 处理主体
}

// 手动触发事件
document.getElementById("btn").click()

不推荐，因为内联事件方法只能添加一个处理程序，通过dom.onclick=newDoHandler进行赋值处理程序，会吧原先的处理程序给覆盖掉。

addEventListener 绑定事件方式

<div id="app">
   <h2>使用onclick绑定事件方式</h2>
</div>

// 给指定dom绑定事件
document.getElementById("app").addEventListener("click",function(){
// 处理程序
})

// 手动触发事件
document.getElementById("app").dispatchEvent(new Event("click"))

可以给同一个dom绑定多个处理程序，会按照绑定的次序依次进行调用。

参考

Event事件类型，有各种子事件类型，都继承了Event类型
继承Event事件类型，CustomEvent事件类型可传任意类型的数据，具体使用方式看api文档
触发事件dispatchEvent
绑定事件addEventListener