第4章：jQuery事件

1、jQuery第四章：第四章： jQuery中的事件中的事件目录目录l常用简单事件常用简单事件鼠标事件鼠标事件键盘事件键盘事件 表单事件表单事件绑定事件绑定事件移除事件移除事件l复合事件复合事件鼠标光标悬停鼠标光标悬停鼠标连续点击鼠标连续点击网页中的事件网页中的事件l和和winform一样，在网页中的事件也是实现和用户交互的一样，在网页中的事件也是实现和用户交互的基础基础l例如例如tab页切换效果，可以通过鼠标点击事件来实现页切换效果，可以通过鼠标点击事件来实现点击选项卡，切换点击选项卡，切换jQuery中的事件中的事件ljQuery事件是对事件是对JavaScript事件的封装事件的封装l事件

2、处理程序指的是当事件处理程序指的是当 HTML 中发生某些事件时所调用的中发生某些事件时所调用的方法方法l常用事件分类如下：常用事件分类如下：基础事件基础事件window事件事件鼠标事件鼠标事件键盘事件键盘事件表单事件表单事件复合事件是多个事件的组合复合事件是多个事件的组合鼠标光标悬停鼠标光标悬停鼠标连续点击鼠标连续点击鼠标事件鼠标事件l鼠标事件是当用户在文档上移动或单击鼠标时而产生的事鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件件l常用鼠标事件常用鼠标事件方法方法描述描述执行时机执行时机click( )触发或将函数绑定到指定元素触发或将函数绑定到指定元素的的click事件事件单击鼠标

3、时单击鼠标时mouseover( )触发或将函数绑定到指定元素触发或将函数绑定到指定元素的的mouse over事件事件鼠标移过时鼠标移过时mouseout( )触发或将函数绑定到指定元素触发或将函数绑定到指定元素的的mouse out事件事件鼠标移出时鼠标移出时jQuery基本语法基本语法l鼠标事件实现主导航特效鼠标事件实现主导航特效$(function() $(#nav li).mouseover(function() /当鼠标移过当鼠标移过#nav li元素时元素时 $(this). addClass(heightlight); /为鼠标所在为鼠标所在li元素添加样式元素添加样式 );

4、$(#nav li).mouseout(function() /当鼠标移出当鼠标移出#nav li元素时元素时 $(this).removeClass(); /移除鼠标所在移除鼠标所在li元素的全部样式元素的全部样式 ););键盘事件键盘事件l用户每次按下或者释放键盘上的键时都会产生事件用户每次按下或者释放键盘上的键时都会产生事件l常用键盘事件常用键盘事件方法方法描述描述执行时机执行时机keydown( )触发或将函数绑定到指定元素触发或将函数绑定到指定元素的的keydown事件事件按下键盘时按下键盘时keyup( )触发或将函数绑定到指定元素触发或将函数绑定到指定元素的的keyup事件事件释

5、放按键时释放按键时keypress( )触发或将函数绑定到指定元素触发或将函数绑定到指定元素的的keypress事件事件产生可打印的字产生可打印的字符时符时键盘事件键盘事件l按键特效按键特效$(document).ready(function () $(document).keydown(function (event) if (event.keyCode = 13) /按回车键按回车键 alert(确认要提交么？确认要提交么？); ););事件对象事件对象event中中封装了事件的参数封装了事件的参数表单事件表单事件l当元素获得焦点时，会触发当元素获得焦点时，会触发focus事件，失去焦点时

6、，会事件，失去焦点时，会触发触发blur事件事件方法方法描述描述执行时机执行时机focus( )触发或将函数绑定到指定元素触发或将函数绑定到指定元素的的focus事件事件获得焦点获得焦点blur( )触发或将函数绑定到指定元素触发或将函数绑定到指定元素的的blur事件事件失去焦点失去焦点表单事件表单事件l焦点特效焦点特效$(document).ready(function () $(name=member).focus(function() $(this).addClass(input_focus); ); $(name=member).blur(function() $(this).remo

7、veClass(input_focus); ););当元素获得焦点时，添当元素获得焦点时，添加样式加样式当元素失去焦点时，移当元素失去焦点时，移除样式除样式表单事件练习表单事件练习l需求说明需求说明文本框获得焦点时，文本框边框的显示效果（颜色）改变文本框获得焦点时，文本框边框的显示效果（颜色）改变绑定事件绑定事件l除了使用事件名绑定事件外，还可以使用除了使用事件名绑定事件外，还可以使用bind()方法方法$(document).ready(function() $(inputname=event_1).bind(click,function() $(p).css(background-colo

8、r,#F30); ););click 事件类型事件类型function()处理函数处理函数绑定多个事件绑定多个事件lbind()方法还可以同时为多个事件绑定方法方法还可以同时为多个事件绑定方法$(document).ready(function () $(inputname=event_1).bind(mouseover: function () $(ul).css(display, none);,mouseout: function () $(ul).css(display, block);););为为mouseover绑定方法绑定方法为为mouseout绑定方法绑定方法移除事件移除事件l移

9、除事件使用移除事件使用unbind()方法，其语法如下：方法，其语法如下：unbind(type,fn)参数参数含义含义描述描述type事件类型事件类型主要包括：主要包括：blur、focus、click、mouseout等基础事件，此外，还可以等基础事件，此外，还可以是自定义事件是自定义事件fn处理函数处理函数用来绑定的处理函数用来绑定的处理函数当当unbind()不带参数时，表示移除所绑定的全部事件不带参数时，表示移除所绑定的全部事件var foo = function () / 处理某个事件的代码处理某个事件的代码 ; $(p).bind(click, foo); /当点击段落的时候会触

10、发当点击段落的时候会触发 foo $(p).unbind(click, foo); / 再也不会被触发再也不会被触发 foo鼠标光标悬停事件鼠标光标悬停事件lhover()方法相当于方法相当于mouseover与与mouseout事件的组合事件的组合$(#myaccound).hover( function() $(#menu_1).css(display,block); , function() $(#menu_1).css(display,none); );光标移入时触发光标移入时触发光标移出时触发光标移出时触发鼠标连续鼠标连续click事件事件ltoggle()方法用于模拟鼠标连续方法用于模拟鼠标连续click事件事件$(body).toggle( function () , function () , function () );第一次点击触发第一次点击触发第二次点击触发第二次点击触发第三次点击触发第三次点击触发$(body).toggle( function () $(this).css(background-color, red); , function () $(this).css(background-color, green); , function () $(thi