首页 > 代码库 > jQuery Direct and delegated events 直接事件与委托事件
jQuery Direct and delegated events 直接事件与委托事件
ref: http://api.jquery.com/on/
直接事件： 将事件委托直接绑定到dom元素上，当事件发生时触发handler.
委托事件: 将事件委托绑定到dom元素的外层容器上，当事件发生时，冒泡到匹配的外层元素，触发相应handler.
采用委托事件的优势有2点： 1.效率高。对子元素数量非常多时，只需要绑定一个handler到父容器。 2. 可以对事件绑定调用时，尚未生成的子元素，仍然有效（只需要保证父容器已存在）。
jquery 使用on方法实现事件绑定。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Test jquery on method</title> <style> div{ border:solid 1px red; margin: 10px; padding: 10px;} </style> <script src="http://www.mamicode.com/JsCss/jquery-1.12.4.min.js"></script> <script> /* ref: http://api.jquery.com/on/ jquery on 方法原型: .on( events [, selector ] [, data ], handler ) */ $(function () { // delegate event 委托事件 $("#btnAdd").click(function () { $("#container").append("<div class=‘sub-container‘><b>"+new Date().getTime()+"</b></div>"); }); $("#container").on(‘click‘, ‘.sub-container‘, function(e){ alert($(this).html()); }); // direct event 直接事件 $("#btnAdd2").click(function () { $("#container2").append("<div class=‘sub-container‘><b>"+new Date().getTime()+"</b></div>"); }); // If selector is omitted or is null, the event handler is referred to as direct or directly-bound. $("#container2 .sub-container").on(‘click‘, function(e){ alert($(this).html()); }); }); </script></head><body> <button id="btnAdd">Add div</button> <div id="container"> <div>无事件触发</div> <div class=‘sub-container‘>xxx</div> </div> <button id="btnAdd2">Add div</button> <div id="container2"> <div>无事件触发</div> <div class=‘sub-container‘>xxx</div> </div></body></html>
jQuery Direct and delegated events 直接事件与委托事件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。