JQuery事件
(1)bind & unbind
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <style> 5 6 </style> 7 </head> 8 <body> 9 10 <button>加载更多</button> 11 12 <script src="js/jquery-1.11.3.js"></script> 13 <script> 14 $('button').bind('click',function(){ 15 console.log('按钮被点击了'); 16 $(this).html('加载中...'); 17 $(this).unbind('click'); 18 }); 19 //$('button').unbind('click'); 20 console.log('代码执行完成'); 21 </script> 22 </body> 23 </html>
(2)one
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <style> 5 6 </style> 7 </head> 8 <body> 9 10 <button>加载更多</button> 11 12 <script src="js/jquery-1.11.3.js"></script> 13 <script> 14 $('button').one('click',function(){ 15 console.log('按钮被点击了'); 16 $(this).html('加载中...'); 17 }); 18 </script> 19 </body> 20 </html>
(3)bind简化版本 bind('mouseenter',fn) => mouseenter(fn)
前面三类函数的共同问题：1)每个事件源都要绑定一次监听函数；2)绑定过程只对当前已经存在的元素有效。——解决办法：利用事件冒泡机制，把子元素的事件委托给父元素
(4)delegate和undelegate
undelegate取消代理 $('div.container').undelegate('span'）
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <style> 5 .box{ 6 width:30px; 7 height:30px; 8 cursor:pointer; 9 } 10 </style> 11 </head> 12 <body> 13 14 <button>添加一个随机色块</button> 15 <br><br> 16 <div class="container"> 17 18 </div> 19 20 21 <script src="js/jquery-1.11.3.js"></script> 22 <script> 23 $('div.container').delegate('span','click',function(){ 24 $(this).parent().remove(); 25 }); 26 $('button').click(function(){ 27 var $span =$('<span>×</span>'); 28 /*$span.click(function(){ 29 console.log($(this).parent()); 30 $(this).parent().remove();; 31 }); 32 */ 33 var $div =$('<div class="box"></div>'); 34 var r = 10+parseInt(Math.random()*90); 35 var g = 10+parseInt(Math.random()*90); 36 var d = 10+parseInt(Math.random()*90); 37 38 $div.css('background-color','#'+r+""+g+""+d); 39 //$div.css('background-color','#ddd'); 40 $div.append($span); 41 $('.container').append($div); 42 43 }); 44 </script> 45 </body> 46 </html>
(5)live & die
作用：把所有子元素的事件委托给document对象，此方法已废弃
(6)on & off
on可以取代前面所有的方法！
用法1：把监听函数直接绑定事件源上
$('button').on('click', fn) //bind/click
用法2：把监听函数委托给父元素
$('div.parent').on('click', 'button', fn) //delegate
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <style> 5 .box{ 6 display:block; 7 width:50px; 8 height:50px; 9 cursor:pointer; 10 } 11 </style> 12 </head> 13 <body> 14 15 <button>添加一个随机色块</button> 16 <br><br> 17 <div class="container"> 18 19 </div> 20 21 22 <script src="js/jquery-1.11.3.js"></script> 23 <script> 24 /*$('div.container').delegate('span','click',function(){ 25 $(this).parent().remove(); 26 }); 27 $('button').click(function(){ 28 var $span =$('<span>×</span>'); 29 $span.click(function(){ 30 console.log($(this).parent()); 31 $(this).parent().remove();; 32 }); 33 34 var $div =$('<div class="box"></div>'); 35 var r = 10+parseInt(Math.random()*90); 36 var g = 10+parseInt(Math.random()*90); 37 var d = 10+parseInt(Math.random()*90); 38 39 $div.css('background-color','#'+r+""+g+""+d); 40 //$div.css('background-color','#ddd'); 41 $div.append($span); 42 $('.container').append($div); 43 44 }); 45 */ 46 $('button').on('click',function(){ 47 var $span = $('<span class="box">×</span>'); 48 49 var r = 10+parseInt(Math.random()*90); 50 var g = 10+parseInt(Math.random()*90); 51 var d = 10+parseInt(Math.random()*90); 52 53 $span.css('background-color','#'+r+""+g+""+d); 54 $('.container').append($span); 55 }); 56 $('.container').on('click','span',function(){ 57 //console.log($(this)); 58 $(this).remove(); 59 }); 60 </script> 61 </body> 62 </html>
(7)ready
面试题： window.onload和$(document).ready()的区别？
二者表示的事件都在“页面加载完成”后执行。
区别：
(1) $(document).ready()底层的JS实现为：
document.addEventListener('DOMContentLoaded', fn, false);
(2)load事件和DOMContentLoaded事件的区别：
load：待HTML、JS、CSS、图片等所有的页面资源加载完成时触发
DOMContentLoaded：待DOM内容(HTML、JS)加载完成时触发，不等待CSS、图片等资源的加载
$(document).ready()事件触发时机要早于window.onload
(3) $(document).ready()可以先后绑定多次；window.onload只能绑定一次
(4) $(document).ready(fn)可以简写为：
$().ready(fn) 或者 $( fn )
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <script src="js/jquery-1.11.3.js"></script> 5 <script> 6 window.onload = function(){ 7 console.log('window.onload 1....'); 8 } 9 window.onload = function(){ 10 console.log('window.onload 2....'); 11 } 12 $(document).ready(function(){ 13 console.log('document.ready 1....'); 14 }); 15 $(document).ready(function(){ 16 console.log('document.ready 2....'); 17 }); 18 $().ready(function(){ 19 console.log('document.ready 3....'); 20 }); 21 $(function(){ 22 console.log('document.ready 4....'); 23 }) 24 </script> 25 </head> 26 <body> 27 28 <script> 29 console.log('页面处理完成'); 30 </script> 31 </body> 32 </html>
