給DOM節點增加事件處理程序一般有以下3種方法
1：通過節點屬性顯式聲明
如以下代碼所示，直接在HTML中，顯式地爲按鈕綁定了click事件，當該按鈕有用戶點擊行爲時，便會觸發myClickFunc方法
<button id="hello" οnclick="myFunc ()">點我試試</button> myFunc 的定義在js中完成：
<pre name="code" class="javascript"> <script type="text/javascript">
var myFunc=function(evt){
console.log("hello ,feifei");
}</script>
2、通過節點屬性動態綁定
這種事件處理程序的綁定，屬於第一種的變形，將一個函數賦值給一個事件處理程序屬性。
<button id="hello" >點我試試</button>通過DOM操作進行綁定：
<script type="text/javascript">
var myFunc=function(evt){
console.log("hello ,feifei");
}
document.getElementById ('hello').οnclick=myFunc ;
</script>
3、通過事件監聽的方式
通過addEventListener,接受3個參數，要處理的事件名，作爲事件處理程序的函數，一個布爾值。布爾值的參數如果爲true， 表示在捕獲階段調用事件處理程序，如果爲false，表示在冒泡階段調用事件處理程序。
<button id="hello" >點我試試</button> <script type="text/javascript">
var myFunc=function(evt){
console.log("hello ,feifei");
}
document.getElementById ('hello').addEventListener ('click',myFunc);
</script>
三種方法的優缺點
1、通過節點屬性顯式聲明：存在時差問題，因爲用戶可能在HTML元素出現的時候就在頁面觸發相應的事件，但當時事件處理程序可能不具備執行條件；這樣拓展事件處理的作用域鏈在不同的瀏覽器中會導致不同的結果；HTML與JavaScript代碼緊密耦合，違背了HTML與JavaScript分離的原則。
2、通過節點屬性動態綁定：一次只能添加一個事件處理程序