[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 }); ```