[TOC] ## .on ### 語法 ``` .on( events [, selector ] [, data ], handler(eventObject) ) .on( events [, selector ] [, data ] ) ``` ### 事件名稱和命名空間 - 事件名稱可以添加指定的event namespaces（命名空間） 來簡化刪除或觸發事件 - .on("click.myPlugin.simple")為 click 事件同時定義了兩個命名空間 myPlugin 和 simple - 可以用.off("click.myPlugin") 或 .off("click.simple")刪除綁定到相應元素的Click事件處理程序 示例 ``` <div class="div1">111</div> <script> $("div").on("click.nsp1",function () { console.log("nsp1"); }) $(".div1").on("click.nsp2",function () { console.log("nsp2"); }) $(".div1").off("click.nsp1") </script> ``` ### **直接和委托的事件** 如果省略selector或者是null，那么事件處理程序被稱為**直接事件** 或**者 直接綁定事件** 當提供selector參數時，事件處理程序是指為**委派事件** 或 **代理事件** #### 直接事件 - 每次選中的元素觸發事件時，就會執行處理程序，不管它直接綁定在元素上，還是從后代（內部）元素冒泡到該元素的 - 事件處理只能綁定在當前被選中的元素上;而且，在您的代碼調用.on()的時候，**他們必須在頁面文檔中已經存在** - 為了確保目前的元素可以被選擇的，最好是在 document 的 ready 事件中進行事件綁定 #### 代理事件 - 對動態生成的DOM進行事件綁定 - 事件不會在直接綁定的元素上觸發，但當`selector`參數選擇器匹配到后代（內部元素）的時候，事件處理函數才會被觸發 - 他們能在后代元素添加到文檔后，可以處理這些事件 - 當需要監視很多元素的時候，代理事件的開銷更小 示例 ``` // 在一個表格的 tbody 中含有 1,000 行 // 會為這 1,000 元素綁定事件 $("#dataTable tbody tr").on("click", function(event){ alert($(this).text()); }); // tbody，并且事件只會向上冒泡一層（從被點擊的tr 到 tbody ） $("#dataTable tbody").on("click", "tr", function(event){ alert($(this).text()); }); ``` > 注意: 委托事件不能用于SVG #### 將數據傳遞到處理程序 - data參數可以是任何類型,最好是使用一個對象（鍵值對） ``` function greet(event) { alert("Hello "+event.data.name); } $("button").on("click", { name: "Karl" }, greet); $("button").on("click", { name: "Addy" }, greet); ``` #### 事件性能及提升方法 - 高頻率事件比如mousemove 或者 scroll 可以每秒觸發幾十個次,需要提高性能 方法: 1. 減少事件處理函數中的工作量 2. 對于在事件處理函數中要用到的信息做好緩存而不是再重新計算一次 3. 或使用setTimeout限制的頁面更新的實際次數 4.在綁定代理事件時，綁定的元素最好盡可能的靠近目標元素。避免在大型文檔中，過多的在 document 或 document.body 上添加代理事件 5. 使用簡單選擇器提高性能,如`"#myForm"`,`"a.external"`, 和`"button"`都是快速選擇器 ### 示例 #### 向事件傳參 ``` function myHandler(event) { alert(event.data.foo); } $("p").on("click", {foo: "bar"}, myHandler) ``` #### 取消默認的動作 ``` $("form").on("submit", function(event) { event.preventDefault(); }); ``` #### 防止冒泡 ``` $("form").on("submit", function(event) { event.stopPropagation(); }); ``` #### 添加并觸發自定義事件 ``` $(".div1").on("myCustomEvent", function (event, myName) { console.log(myName);//{name:"idcpj"} }) $(".div1").on("click",function (event) { $(this).trigger("myCustomEvent",{name:"idcpj"}) }) ``` #### 同對象添加多個事件 ``` $("div.test").on({ click: function(){ $(this).toggleClass("active"); }, mouseenter: function(){ $(this).addClass("inside"); }, mouseleave: function(){ $(this).removeClass("inside"); } }); ``` #### 代理觸發 ``` $("body").on("click", "p", function(){ //code }); ```