JQuery第五章事件

科技2022-07-15 123

事件

1:绑定事件方法:

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>

2:去除绑定方法： unbind()

实例：

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()

9:阻止事件冒泡和默认行为

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>

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"> 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>

11：this和event.target的区别

this指向事件前对象 event.target指向事件源

Processed: 0.017, SQL: 8