bind(事件，函数) 元素绑定事件
绑定事件方法的优点就是可以绑定多个事件，可以同时处理
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>点击</button> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // $('button').click(function(){ // alert('今天天气不错') // }) // bind() // $('button').bind('click',function(){ // alert('今天天气好晴朗') // }) // $('button').bind('click mousemove',function(){ // alert('处处好风光') // }) // $('button').bind({ // 'click':function(){ // alert('今天天气好晴朗') // }, // 'mouseover':function(){ // alert('处处好风光') // } // }) // $('button').click(function(){ // alert('今天天气不错1') // }) // $('button').mousemove(function(){ // alert('今天天气不错2') // }) // $('button').bind('click',a) // $('button').bind('mouseover',b) // function a(){ // alert('哈哈哈哈') // } // function b(){ // alert('呵呵呵呵') // } }) </script> </html>unbind()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>点击</button> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // $('button').bind('click',a) // $('button').bind('mouseover',b) // function a(){ // alert('哈哈哈哈') // } // function b(){ // alert('呵呵呵呵') // } // $('button').unbind('click') $('button').bind({ 'click':function(){ alert(111111111) }, 'mouseover':function(){ alert(2222222222) } }) $('button').unbind('mouseover') }) </script> </html>鼠标事件 click() 点击事件 dblclick() 双击 mousedown() 鼠标按下 mouseup() 鼠标弹起 mouseover() 鼠标移入 mouseout() 鼠标移出 mouseenter() 鼠标移入 mouseleave() 鼠标移出 他们俩个的区别在于：over和out事件碰到子元素也会触发事件，enter和leave不会 mousemove() 鼠标移入移出
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ position: fixed; bottom: 0; right:0; width: 100px; height: 100px; background: #ccc; color:#fff; font-size: 30px; } </style> </head> <body style="height: 3000px;"> <button>点击</button> <input type="text" name="" id="" value="旋涡" /> <div>回到顶部</div> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // $('button').click(function(){ // alert(1) // }) // $('button').dblclick(function(){ // alert(2) // }) // $('button').mousedown(function(){ // alert(3) // }) // $('button').mouseup(function(){ // alert(4) // }) // $('button').mouseover(function(i,val){ // alert(5) // }) // $('input').select(function(){ // alert(6) // }) // $('input').change(function(){ // alert(7) // }) // $(window).resize(function(){ // alert(8) // }) // $('div').click(function(){ // $(window).scrollTop(0) // }) // $(window).scroll(function(){ // console.dir(1) // }) }) </script> </html>滚动事件 scroll() 滚动
表单事件 focus() 获取焦点 blur() 失去焦点 focusin() 获取焦点 focusout() 失去焦点 submit() 提交 select() 选中文本 change() 改变文本
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; background: red; } </style> </head> <body> <div> <input type="text" name="" id="" value="" /> </div> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // $('input').focus(function(){ // alert(1) // }) // $('input').blur(function(){ // alert(2) // }) // $('div').focusout(function(){ // alert(3) // }) // $('div').focusin(function(){ // alert(4) // }) }) </script> </html>浏览器事件 resize() 缩放浏览器
键盘事件 keydown() 键盘按下 keyup() 键盘弹起 keypress() 键盘简码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // $(document).keydown(function(e){ // alert(e.keyCode) // }) // $(document).keyup(function(e){ // alert(e.keyCode) // }) $(document).keypress(function(){ alert(1) }) }) </script> </html>hover(函数，函数) 举例： hover(function(){},function(){}) 事件中的第一个函数是移入是做的事情，后面函数里面是移出的时候做的事情
如果大家想要用废弃的方法在新版本里面，可以下载 jquery-migrate.js 文件，来向下兼容已被删除掉的方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; } </style> </head> <body> <div></div> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // $('div').hover(function(){ // $(this).css('background','blue') // }) $('div').hover( function(){ $('div').css('background','blue') }, function(){ $('div').css('background','red') } ) </script> </html>on(事件，要委托的元素，函数) one() 只能执行一次事件的方法 live() 事件委托（在1.9版本被删除） die() 删除事件委托（在1.9版本被删除）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li{ width: 100%; height: 50px; background: red; margin: 20px 0; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <button>点击</button> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // var oli=document.getElementsByTagName('li'); // var oul=document.getElementsByTagName('ul')[0]; // for(var i=0;i<oli.length; i++){ // oli[i].index=i; // oli[i].οnclick=function(){ // alert(this.index) // } // } // oul.οnclick=function(e){ // var e=e||window.event; // var t=e.target||e.srcElement; // if(t.nodeName.toLocaleUpperCase()=='LI'){ // alert(123) // } // } // $('ul').on('click','li',function(){ alert('今天天气不错') // alert($(this).index()) // }) // $('button').click(function(){ // alert(1) // }) $('button').one('click',function(){ alert(2) }) </script> </html>trigger(事件) 模拟事件方法(在页面刷新的时候模拟执行一次) trigger() 可以传参（字符串，对象，数组） triggerHandler()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>点击</button> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // $('button').click(function(){ // alert(1) // }) // $('button').click(function(){ // alert(1) // }).trigger('click') $('button').click(function(i,v1,v2){ // alert(v1.a) // alert(v1.b) alert(v2) alert(v2[0]) }).trigger('click',[{'a':'1','b':'2'},['111','222']]); </script> </html>event.stopPropagation(); 阻止事件冒泡方法 event.preventDefault(); 阻止默认行为 ( 表单提交 ) return false 阻止默认行为
阻止事件冒泡
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; background: red; } p{ width: 150px; height: 150px; background: blue; } span{ float: left; width: 50px; height: 50px; background: pink; } </style> </head> <body> <div> <p> <span> </span> </p> </div> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('div').click(function(e){ alert('我是div') e.stopPropagation() }) $('p').click(function(e){ alert('我是p') e.stopPropagation() }) $('span').click(function(e){ alert('我是span') e.stopPropagation() }) </script> </html>阻止默认行为
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="10事件命名空间.html">跳转</a> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('a').click(function(e){ // e.preventDefault(); return false; }) </script> </html>对象属性： event.target 事件源 event.srcElement（IE事件源写法） event.type 事件类型 event.pageX/Y 鼠标在页面上的坐标位置 event.clientX/Y 鼠标在可视窗口上的坐标位置 event.screenX/Y 鼠标在屏幕上的坐标位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ position: fixed; } </style> </head> <body style="height: 3000px;"> <p></p> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).mousemove(function(e){ // alert(e.type) // $('p').html(e.clientX+','+e.clientX) // $('p').html(e.pageX+','+e.pageY) $('p').html(e.screenX+','+e.screenY) }) </script> </html>this指向事件前对象 event.target指向事件源
