js中關於事件處理函數名後面是否帶括弧的問題

標籤：add   概念   細節   常見   今天   好處   style   執行函數   他也   

　　今天總結一個關於事件處理常式的小細節。首先回顧一下事件處理的一些概念。

　　JS中的事件處理（事件綁定）就是讓某種或某些事件觸發某些活動。有兩種常見的形式，分別是DOM Level 0 和DOM Level 2。這兩種方式最大的區別就在於DOM 0級事件處理只能用於事件冒泡，而DOM 2級事件處理卻可以通過設定第三個參數來分別支援事件冒泡和事件捕獲。

　　DOM 0級事件處理一般是直接把一個函數分配給一個事件處理常式，既可以在元素中直接分配一個事件處理常式，如方式一所示;也可以在指令碼中把函數分配給事件處理常式，如方式二所示。

<!--方式一--><div onclick="fun1();fun2(‘world!‘);"></div><!--方式二--><div id="a">點我</div><script>    var a=document.getElementById("a");    a.onclick=fun1;   //方式二     function fun1(){        alert("hello!");    }    function fun2(cc){        alert(cc);    }</script>

　　這兩種方式的區別在上述樣本中也顯示了，第一種方式可以同時綁定多個處理函數，但要注意必須是全域函數，否則會拋出Reference錯誤。第二種方式只能一次綁定一個處理函數，否則新的函數會覆蓋舊的函數。

　　DOM 2級事件處理不會直接綁定處理函數，而是將函數添加為一個事件監聽器如下，他也可以綁定多個處理函數，不會產生覆蓋。但這種方式存在瀏覽器安全色的問題，IE下必須用attachEvent方法代替。

a.addEventListener("click",fun1,false); //事件冒泡a.addEventListener("click",anotherFun,false); //不會覆蓋上一事件，均被執行

　　簡單回顧到這裡，言歸正傳，不知道在回顧的過程中大家有沒有注意到一個令人困惑的小細節，就是引用函數的時候，函數名稱後面有的時候加括弧，有的時候不加括弧。這到底對程式的運行有怎樣的影響呢？我經過查閱資料按照自己的理解小小的總結如下。

　　首先是加括弧的，你可能經常在程式裡面這樣寫“fun1();”，沒錯，函數名後邊加括弧表示立即執行該函數，如果函數記憶體在傳回值則得到該值。這樣用的多了，你可能就習慣在所有調用函數的地方這樣寫，比如之前說的事件處理函數。但是，如果你這樣做了那就可能造成一些失控的狀況。比如說，你明明只是想在點擊某一元素的時候才執行函數，卻發現這個函數在一開始就被執行了。你可以發現，上面舉例時所用的DOM0方式二和DOM2級事件處理函數都沒有在函數名後面加括弧，原因就在於避免這種狀況發生。如果你加了括弧，這個函數fun1就會被立即觸發執行。

　　那為什麼DOM0方式一中卻有括弧呢？那是因為標籤的事件屬性裡引號之間會被當做js語句直接執行，加了括弧才能保證調用並執行函數。但是由於是用元素標籤這種方式綁定的事件，執行的時機就被控制在了點擊該標籤時觸發。

　　如果沒有函數名又想立即執行呢？也就是立即執行匿名函數運算式，這種模式很常見，來觀察一下它的屁股後面是不是也跟著個立即執行小括弧呢？注意，這種IIFE形式中包裹著整個函數體的小括弧會限制範圍。具體對IIFE感興趣的童鞋可以去查閱相關資料，這裡不作贅述。

(function(){    //do something...})();

　　現在再來分析不加括弧的，前面我們提到了不加括弧可以避免失控。是因為只將函數名傳遞給事件，相當於將函數指標（也就是這個函數的入口地址）傳給元素事件。這樣做的好處就在於可以在需要的時候找到函數並執行。打個小比喻來說，你和你的朋友會面，加了小括弧時你的朋友就立即出現在你面前，他才不管你當時是不是在忙，有種不請自來的不快感；而不加括弧相當於你的朋友告訴了你他家在哪，當你需要他的時候就來找他，這可真是位貼心的朋友啦。所以，大多數事件綁定都僅僅只是傳遞給事件一個函數指標也就是函數名。

　　這時又有一個問題，之前說明的都是無參函數，如果是像程式碼範例中的fun2這種有參函數怎麼辦呢？難道只能用DOM0的方式一那種方法嗎？當然是否定的，盡量不要使用DOM0方式一那種形式，不符合結構與行為分離的原則。一般這種情況下就是使用匿名函數解決了，如下代碼所示。如果大家有什麼好的建議也可以留言分享一下~

//DOM Level 0a.onclick=function(){    fun2("world!");};//DOM Level 2a.addEventListener("click",function(){fun2("world!");},false);

　　以上就是我的總結，如有錯誤還要請大家多多指正，謝謝！感謝一起學習的小夥伴陳童鞋，正是因為他提的問題才讓我注意到了這個經常被忽略的細節。

 

js中關於事件處理函數名後面是否帶括弧的問題