[DOM Event Learning] Section 1 DOM Event 處理器繫結的幾種方法

聖騎士wind發表於2015-03-20

[DOM Event Learning] Section 1 DOM Event處理器繫結的幾種方法

 
　　網頁中經常需要處理各種事件,通常的做法是繫結listener對事件進行監聽,當事件發生後進行一些特定處理.
　　監聽事件的幾種方法如下文.
 

第一種,寫在頁面標籤裡面

<button onclick="alert('Hello')">Say hello</button>

　　上面這行程式碼,將按鈕點選後的彈窗操作在標籤宣告的時候就繫結了.

　　這是一種糟糕的方法,原因如下:
　　1.View code(HTML)和互動code(JS)強耦合了.這意味著每次我們想改方法,都需要編輯HTML.
　　2.可擴充套件性差.如果這個方法需要被附加在多個元素上,重複的程式碼會讓頁面膨脹,並且維護困難.
 
 

第二種,用JavaScript設定元素對應的onXXX事件屬性

　　如程式碼:
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        window.onload = function () {
            // Event binding using onXXX property from JavaScript
            var helloBtn = document.getElementById("helloBtn");
            helloBtn.onclick = function (event) {
                alert("Hello Button");
            }
        }
    </script>

</head>
<body>
<button id="helloBtn">Say hello</button>
</body>
</html>
　　這種方法比較簡單,並且會覆蓋之前的handler,也沒有什麼瀏覽器相容的問題.
 
 

第三種,使用addEventListener()方法

　　獲取元素之後,可以用addEventListener()方法:
<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript">
        window.onload = function () {
            // Event binding using addEventListener
            var helloBtn = document.getElementById("helloBtn");
            helloBtn.addEventListener("click", function (event) {
                alert("Hello.");
            }, false);

        }
    </script>
</head>
<body>
<button id="helloBtn">Say hello</button>
</body>

</html>
　　這種方法在現代的瀏覽器上是工作良好的,但是在IE9之前的IE瀏覽器是沒有這個方法的,它們用attachEvent().
 

第四種,使用jQuery的方法進行事件處理器繫結

　　jQuery為我們處理了這種不相容問題,因此可以用jQuery的方法來繫結事件:
// Event binding using a convenience method
$("#helloBtn").click(function (event) {
    alert("Hello.");
});

 

　　jQuery監聽事件有很多種方法:
// The many ways to bind events with jQuery
// Attach an event handler directly to the button using jQuery's
// shorthand `click` method.
$("#helloBtn").click(function (event) {
    alert("Hello.");
});

// Attach an event handler directly to the button using jQuery's
// `bind` method, passing it an event string of `click`
$("#helloBtn").bind("click", function (event) {
    alert("Hello.");
});

// As of jQuery 1.7, attach an event handler directly to the button
// using jQuery's `on` method.
$("#helloBtn").on("click", function (event) {
    alert("Hello.");
});

// As of jQuery 1.7, attach an event handler to the `body` element that
// is listening for clicks, and will respond whenever *any* button is
// clicked on the page.
$("body").on({
    click: function (event) {
        alert("Hello.");
    }
}, "button");

// An alternative to the previous example, using slightly different syntax.
$("body").on("click", "button", function (event) {
    alert("Hello.");
});
 
　　jQuery 1.7開始,所有的事件繫結方法最後都是呼叫.on()方法.
　　上面這個例子中,前三個方法呼叫是等價的.
　　第四個和第五個方法,監聽的是body上所有button元素的click事件.
　　DOM樹裡更高層的一個元素監聽發生在它的children元素上的事件,這個過程叫做事件代理(event delegation).
 
 

參考資料

相關文章