基础事件



1. 绑定事件

   jQuery通过.bind()方法来为元素绑定这些事件，可以传递三个参数：bind(type,[data],fn)

   （1）$(‘input’).bind(‘click’,function(){

   alert(“点击”)；})

（2）$('input').bind('click',fn);

          function fn(){

                            alert("welcometo our house");}

（3）也可以同时绑定多个事件

$('input').bind('mouseovermouseout',function(){

          $('div').html(function(index,value){

                            returnvalue+'1';});});

通过对象的键值对绑定多个参数

   $('input').bind({

                            mouseover:function(){

                                     alert("in");

                            },

                            mouseout:function(){

                                     alert("out");}});

（4）删除绑定事件

$(‘input’).unbind();删除当前元素的全部事件

$(‘input’).unbind(‘click’);//删除click事件

$(‘input’).unbind(‘click’,fn1);//删除click事件中的fn1处理函数

1. 简写事件

jQuery封装了常用的绑定事件

 

方法名	触发事件	描述
click()	鼠标	触发每一个匹配元素的click（单击）事件
dblclick()	鼠标	触发每一个匹配元素的dblclick（双击）事件
mousedown(fn)	鼠标	触发每一个匹配元素的mousedown（点击后）事件
mouseup(fn)	鼠标	触发每一个匹配元素的mouseup（点击弹起）事件
mouseover(fn)	鼠标	触发每一个匹配元素的mouseover（鼠标移入）事件
mouseout(fn)	鼠标	触发每一个匹配元素的mouseout（鼠标移出）事件
mousemove(fn)	鼠标	触发每一个匹配元素的mousemove（鼠标移动）事件
mouseenter(fn)	鼠标	触发每一个匹配元素的mouseenter（鼠标穿过）事件
mouseleave(fn)	鼠标	触发每一个匹配元素的mouseleave（鼠标穿出）事件
keydown(fn)	键盘	触发每一个匹配元素的keydown（键盘按下）事件
keyup(fn)	键盘	触发每一个匹配元素的keyup（键盘弹起）事件
keypress(fn)	键盘	触发每一个匹配元素的keypress（键盘按下）事件
unload(fn)	文档	当卸载本页面时绑定一个要执行的函数
resize(fn)	文档	触发每一个匹配元素的resize（文档改变大小）事件
scroll(fn)	文档	触发每一个匹配元素的scroll（滚动条拖动）事件
focus(fn)	表单	触发每一个匹配元素的focus（焦点激活）事件
blur(fn)	表单	触发每一个匹配元素的blur（焦点丢失）事件
focusin(fn)	表单	触发每一个匹配元素的focusin（焦点激活）事件
focusout(fn)	表单	触发每一个匹配元素的focusout（焦点丢失）事件
select(fn)	表单	触发每一个匹配元素的select（文本选定）事件
change(fn)	表单	触发每一个匹配元素的change（值改变）事件
submit(fn)	表单	触发每一个匹配元素的submit(表单提交)事件

 

 

1、$(window).unload(function(){

                alert("unload");});

2、$(window).resize(function(){

                alert("sizechange");});

3、$('input').select(function(){

          alert("text");});

4、$('input').change(function(){

        alert("text change"); });

5、$('form').submit(function(){

        alert("are you sure?");});

注意：submit（）是作用于form。

6、mouseover、mouseout和mouseenter、mouseleave的区别：

mouseover、mouseout表示移入和移出

mouseenter、mouseleave表示穿过和穿出，mouseenter、mouseleave穿过子元素时不会触发，而mouseover、mouseout则会触发，over、out会触发子节点

单个元素的情况下，两种方法效果相同，但是在有层叠的元素情况下，效果不同

       （1）$('div').mouseenter(function(){

                 $('p').html(function(index,value){

                          returnvalue+"1";});});

       （2）$('div').mouseover(function(){

                 $('p').html(function(index,value){

                          returnvalue+"1";});});

7、keydown(),keyup()返回的是键码，而keypress()返回的是字符编码

$(‘input’).keydown(function(e){

alert(e.keyCode);});//返回65

$(‘input’).keydown(function(e){

alert(e.charCode);});//返回97

8、光标激活focus()和光标丢失blur()必须是当前元素才能激活。

   光标激活foucusin()和focusout()可以是子元素激活

1. 复合事件

方法名	描述
ready(fn)	当DOM加载完毕触发事件
hover([fn1,]fn2)	当鼠标移入触发第一个fn1，移出触发fn2
toggle(fn1,fn2[,fn3…])	已废弃，当鼠标点击触发fn1，再点击触发fn2

1、$('div').hover(function(){

         $(this).css('background','red');},

function(){

         $(this).css('background','green');});   结合了mouseenter()和mouseleave()两种方法

3、由于toggle()方法已经废除，也可由其他方法替代

var flag=1;

$('div').click(function()

{if(flag==1){

                   $(this).css('background','red');

                   flag=2;}else

                            if(flag==2){

                   $(this).css('background','blue');

                   flag=3;}

         elseif(flag==3){$(this).css('background','green'); flag=1;}

                   });