常見的事件繫結的幾種方法

主要有on(),bind(),live(),delegate(),隨著版本的不斷更新，live(),bind(),delegate()被相繼棄用。
live()：1.7版本之後被棄用
bind()、delegate()：3.0版本之後被棄用
雖然在3.0之後的版本中有bind和delegate在，但在具體的實現上還是呼叫的on()

bind: function( types, data, fn ) {
        return this.on( types, null, data, fn );
    },
delegate: function( selector, types, data, fn ) {
        
 
return this.on( types, selector, data, fn );
    },

本文主整理1.7之後的事件繫結有on(),one()
one():只執行一次並自動除
on():為當前選定的元素集附加事件處理方法，與之對應的解綁方法off()；

 $(function () {
            $("p").on("click", function () {
                alert($(this).text())
            });
            $("button").click(function () {
                $(
 
"p").off("click");
            });
        });
});

 $(document).ready(function () {
            $("p").one("click", function () {
                $(this).animate({ fontSize: "+=6px" });
            });

            $("p").on("click", function () {
                $(this).animate({ fontSize: "+=6px" });
            });
        });
 

on()的使用(1.7和之後的版本)

on():為當前選定的元素集附加事件處理方法，與之對應的解綁方法off()；
檢視on的原始碼可以發現，on的方法中是呼叫EventListener來繫結的

語法： .on( events [, selector ] [, data ], handler )

demo:

function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

語法： .on( events [, selector ] [, data ] )

 demo:

$( "div.test" ).on({
  click: function() {
    $( this ).toggleClass( "active" );
  }, 
  mouseenter: function() {
    $( this ).addClass( "inside" );
  }, 
  mouseleave: function() {
    $( this ).removeClass( "inside" );
  }

直接和委託事件

• 當on函式省略了selector引數或者selector為null時，那麼事件被稱為直接事件或直接繫結事件。每次選中的元素觸發事件時，就會執行處理程式，不管它直接繫結在元素上，還是從後代（內部）元素冒泡到該元素的。
• 當提供了selector引數時，事件被稱為委託事件。事件不會在直接繫結的元素上觸發，但當selector引數選擇器匹配到後代（內部元素）的時候，事件處理函式才會被觸發。

1、一些區別：

1. 直接事件處理只能繫結在當前被選中的元素上，而且，在您的程式碼呼叫.on()的時候，他們必須在頁面文件中已經存在。
2. 委託事件除了可以給未建立的後代元素繫結事件外（即上面提到的優勢），委託事件的另一個好處就是，當需要監視很多元素的時候，代理事件的開銷更小

例子

下面的例子table有1,000行，給行上新增點選事件

<script type="text/javascript">
        $(function () {
            var tabledom = "";
            for (var i = 0; i < 10; i++) {
                tabledom += "<tr ><td>測試" + i + "</td></tr>";
            }
            $("#dataTable tbody").html(tabledom);

            $("#btnAddtr").click(function () {
                var html = ''
                for (var i = 0; i < 10; i++) {
                    html += "<tr ><td>後新增行" + i + "</td></tr>";
                }
                $("#dataTable tbody").append(html)
            });

            //第一種事件繫結方式
            $("#dataTable tbody tr").click(function () {
                console.log("第一種方式點選:" + $(this).text());
            });
            // 第二種事件繫結方式
            $("#dataTable tbody").on("click", "tr", function () {
                console.log("第二種方式點選:" + $(this).text());
            });

        })
    </script>

 <table id="dataTable">
            <tbody></tbody>
        </table>
        <button id="btnAddtr">新增table行</button>

程式碼解釋

1. 事件會繫結到選中元素的所有子元素，如果一個div有1,000行，那麼以下程式碼會將處理函式繫結到1,000個元素

$( "#dataTable tbody tr" ).on( "click", function() {
  console.log( $( this ).text() );
});

 2.委派事件的方法只有一個元素的事件處理程式，tbody，並且事件只會向上冒泡一層（從被點選的tr 到 tbody ）:

$("#dataTable tbody").on("click", "tr", function(event){
  console.log( $( this ).text() );
});

從圖片中可以出例1綁定了1000次，例2只綁定了一次，記憶體開銷例1也比例2的開銷會比較大，因此在使用時，儘量使用代理事件。

3.後新增的行，使用第一種方式事件繫結無效，但是第二種方式點選事件有效

2、冒泡特性

預設情況下，大多數事件的冒泡從最初的event target（目標元素）開始的，直到document元素。每個元素都沿著DOM層級這條路，jQuery會呼叫任何匹配的已被繫結的事件處理程式。如果想要防止事件向上冒泡文件樹（從而防止這些元素的處理程式執行）可以呼叫的event.stopPropagation()。但呼叫event.stopPropagation(),任何繫結到當前元素上的其他同類會繼續執行，為了防止這種情況，可以呼叫event.stopImmediatePropagation()。

呼叫event.stopPropagation()能阻止事件的冒泡，但預設事件事件還會觸發，需要呼叫event.preventDefault()。event.stopPropagation()和event.preventDefault()會從一個事件處理程式會自動返回false。也可以直接將 false 當作 handler 的引數，作為 function(){ return false; } 的簡寫形式。直接使用return false的時候冒泡和預設事件都會阻止。

總結：

• event.stopPropagation(); 只阻止了冒泡事件， 預設行為沒有阻止
• event.stopImmediatePropagation() 阻止了冒泡事件， 預設行為沒有阻止，另外還阻止了同類事件
• event.preventDefault(); 只阻止了預設事件:a的跳轉，冒泡事件沒有阻止
• return false; 冒泡事件和預設事件都阻止

以下是例子，可以檢視效果

  <script>
        $(function () {
            $("a").click(function (event) {
                $("div").append("<p>父元素被點選</p>");
            })

            $("button").click(function (event) {
                $("#txtResult").append("<p>子按鈕被點選</p>");
                // event.stopPropagation();  //只阻止了冒泡事件， 預設行為沒有阻止
                // event.stopImmediatePropagation() //阻止了冒泡事件， 預設行為沒有阻止，另外還阻止了同類事件
                // event.preventDefault();  //只阻止了預設事件:a的跳轉，冒泡事件沒有阻止
                //return false;   //冒泡事件和預設事件都阻止
            })
            $("button").click(function (event) {
                $("#txtResult").append("<p>其他事件被觸發</p>");
            })
        })
    </script>
  

  <a href="http://www.baidu.com" target="_blank">超連結
        </br>
        <button>子按鈕</button>
    </a>
    <div id="txtResult">
    </div>

3、其他

• 多個事件繫結同一個函式

    function Print(type) {
            $("#txtResult").append("<p>" + type + "</p>")
        }
        ///-------------多個事件繫結同一個函式-----------------///
        $(function () {
            $("p").on("mouseover mouseout", function (event) {
                Print(event.originalEvent.type)
            });
        });

• 多個事件繫結不同函式

  ///--------------多個事件繫結不同函式----------------///
        $(function () {
            $("p").on({
                mouseover: function (event) { Print(event.originalEvent.type) },
                mouseout: function (event) { Print(event.originalEvent.type) },
                click: function (event) { Print(event.originalEvent.type) }
            });
        });

• 繫結自定義事件

  ///--------------繫結自定義事件----------------///
        $(function () {
            $("p").on("myOwnEvent", function (event, showName) {
                $("#txtResult").append(showName + "! What a beautiful name!");
            });
            $("button").click(function () {
                $("p").trigger("myOwnEvent", ["Hello"]);
            });
        });

• 傳遞資料到函式

     ///--------------傳遞資料到函式----------------///
        $(function () {
            $("p").on("click", { msg: "clicked!" }, handlerName);
        });
        function handlerName(event) {
            alert(event.data.msg);
        }