1:绑定事件方法:
bind(事件，函数) 元素绑定事件 **绑定事件方法的优点就是可以绑定多个事件，可以同时处理
<body> <button>点击</button> </body> <script type="text/javascript"> // $('button').click(function(){ // alert(12312) // }) // $('button').mouseover(function(){ // alert(345534) // }) // $('button').bind('click',function(){ // alert('哈哈哈') // }) // $('button').bind('click mouseover',function(){ // alert('哈哈哈') // }) // $('button').bind({ // 'click':function(){ // alert('哈哈哈哈') // }, // 'mouseover':function(){ // alert('呵呵呵呵') // } // }) // $('button').bind('click',a) // $('button').bind('mouseover',b) // function a(){ // alert('哈哈哈哈') // } // function b(){ // alert('呵呵呵呵') // } </script>2:去除绑定方法： unbind()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <button>点击</button> </body> <script type="text/javascript"> $('button').bind('click',a) $('button').bind('mouseover',b) function a(){ alert('哈哈哈哈') } function b(){ alert('呵呵呵呵') } $('button').unbind('click') // $('button').bind({ // 'click':function(){ // alert('哈哈哈哈') // }, // 'mouseover':function(){ // alert('呵呵呵呵') // } // }) // $('button').unbind('click') </script> </html>3：其他事件方法： ------------------------------鼠标事件----------------------------------------------------------
click() 点击事件 dblclick() 双击 mousedown() 鼠标按下 mouseup() 鼠标弹起 mouseover() 鼠标移入 他们俩个的区别在于：over和out事件碰到子元素也会触发事件，enter和leave不会 mouseout() 鼠标移出 mouseenter() 鼠标移入 mouseleave() 鼠标移出 mousemove() 鼠标移入移出
------------------------------滚动事件----------------------------------------------------------
scroll() 滚动
------------------------------表单事件----------------------------------------------------------
focus() 获取焦点 blur() 失去焦点 focusin() 获取焦点 focusout() 失去焦点 submit() 提交 select() 选中文本 change() 改变文本
------------------------------浏览器事件-------------------------------------------------------
resize() 缩放浏览器
------------------------------键盘事件----------------------------------------------------------
keydown() 键盘按下 keyup() 键盘弹起 keypress() 键盘简码
4：复合事件
hover(函数，函数) 举例： hover(function(){},function(){}) 事件中的第一个函数是移入是做的事情，后面函数里面是移出的时候做的事情5:如果大家想要用废弃的方法在新版本里面，可以下载 jquery-migrate.js 文件，来向下兼容已被删除掉的方法 6:事件委托方法
on(事件，要委托的元素，函数) one() 只能执行一次事件的方法 live() 事件委托（在1.9版本被删除） die() 删除事件委托（在1.9版本被删除）7：事件命名空间
举例： $('li:eq(1)').bind('click.b',f2); function f2(){ alert('我是第2个li') } $('li:eq(0)').unbind('click.a')8：事件模拟操作
trigger(事件) 模拟事件方法(在页面刷新的时候模拟执行一次) trigger()可以传参（字符串，对象，数组） triggerHandler()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <button>点击</button> </body> <script type="text/javascript"> // $('button').click(function(){ // alert('我被点击了') // }).trigger('click') // $('button').click(function(e,data1,data2){ // alert(data1.a+',' +data2[1]); // }).trigger('click',[{'a' :'1','b':'2'},['123','456']]); </script> </html>9:阻止事件冒泡和默认行为
event.stopPropagation(); 阻止事件冒泡方法 event.preventDefault(); 阻 止默 认 行为 ( 表 单提 交 ) return false 阻 止默 认 行为
阻止事件冒泡
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 500px; height: 500px; background: red; } p{ width: 300px; height: 300px; background: yellow; } span{ display: block; width: 100px; height: 100px; background: blue; } </style> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div> <p> <span> <button>点击</button> </span> </p> </div> </body> <script type="text/javascript"> $('button').click(function(e){ alert('我是按钮'); e.stopPropagation(); }) $('span').click(function(){ alert('我是span') }) $('p').click(function(){ alert('我是p') }) $('div').click(function(){ alert('我是div') }) </script> </html>阻止默认行为
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <form action="" method="post"> <input type="submit" value="点击"/> </form> <a href="10事件命名空间.html">点击1</a> </body> <script type="text/javascript"> $('input').click(function(event){ event.preventDefault(); }) $('a').click(function(event){ return false; }) </script> </html>10:事件对象 event
对象属性： 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"> div{ width: 100px; height: 100px; background: red; position: relative; margin: 100px; } </style> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> </head> <body style="height: 2000px;"> <div> </div> </body> <script type="text/javascript"> $(document).click(function(e){ // console.log(e.pageX+','+e.pageY) // console.log(e.screenX+','+e.screenY) console.log(e.clientX+','+e.clientY) }) </script> </html>11：this和event.target的区别
this指向事件前对象 event.target指向事件源