DOM操作--添加事件處理程序

給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、通過節點屬性動態綁定:一次只能添加一個事件處理程序

3、通過事件監聽的方式:可以添加多個事件處理程序,是推薦用法


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章