$(window).live('click', function() { // 错误 live 是事件委托到 document的
console.log('live')
})
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.2.min.js"></script> <script> // 所有的 .live() 事件被添加到 document 元素上 $('.live').live('click', function() { // 事件委托 绑定到 $(document) 对象 console.log('live $(document)') }) </script> </head> <body> <ul> <script> // 获取到 ul $('ul').delegate('.delegate', 'click', function() { // 事件委托 console.log('delegate') }) // 受托方就从默认的 $(document) 变成了 $('ul')[0]，节省了冒泡的旅程 // 上下文参数必须是一个单独的 DOM 元素 $('.live', $('ul')[0]).live('click', function() { console.log('live $(\'ul\')[0]') }) </script> <li class="one">one</li> <li class="click">click</li> <li class="bind">bind unbind</li> <li class="live">live die, removed: 1.9</li> <li class="delegate">delegate undelegate</li> <li class="on">on off</li> </ul> <script> $('.one').one('click', function() { console.log('one') }) $('.one').bind('mouseenter', function(event) { // 等效 console.log('one mouseenter') $(this).unbind(event) }) $('.click').click(function() { console.log('click') }) var message = '1' $('.bind').bind('click', {msg: message}, function(event) { console.log(event.data.msg) }) var message = '2' $('.click').bind('click', {msg: message}, function(event) { // 避免都是2 console.log(event.data.msg) }) $('.live').live('aa', function() { // 自定义事件 console.log('live') }) $('.click').live('click', function() { $('.live').trigger('aa') }) $('ul').on('mouseenter mouseleave', '.on', function() { // 事件委托 console.log('on') }) $('.on').on({ // 非事件委托 mouseenter: function() { console.log('mouseenter') }, mouseleave: function() { console.log('mouseleave') } }) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> <script src="http://static01.baomihua.com/js/lib/jquery-1.4.4.min.js?t=20120926.js"></script> </head> <body> <ul> <li>item1</li> </ul> <script> $('ul').delegate('li', 'click mouseenter', function(e) { e || (e = window.event) if (e.type === 'click') { alert('click') } else if (e.type === 'mouseenter') { alert('mouseenter') } }) </script> </body> </html>
jQuery API中文文档 √
http://www.css88.com/jqapi-1.9/
jQuery代码优化：事件委托篇 √
http://www.ituring.com.cn/article/467