03、jQuery事件

鼠标事件

click()     //单击鼠标时触发

$('#bn').click(function(){

alert(12324);

});

 

dblclick()     //双击鼠标时触发

$('#bn').dblclick(function(){
alert(12324);
});

 

mousedown()     //鼠标按下时触发

$('#bn').mousedown(function(){
alert(12324);
});

 

mouseup()     //鼠标松开时触发

$('#bn').mouseup(function(){
alert(12324);
});

 

mouseenter()     //鼠标进入时触发

$('#bn').mouseenter(function(){
alert(12324);
});

 

mouseleave()     //鼠标离开时触发

$('#bn').mouseleave(function(){
alert(12324);
});

 

hover( [enter,] over )     //鼠标经过时触发。一个参数时，进入和离开都触发第一个函数；两个函数时，进入触发第一个函数，离开触发第二个函数

$('#bn').hover(function(){
alert(12324);
},function(){

alert(5678);

});

 

不常用

mouseover()     //鼠标进入指定元素  及其子元素时  触发

//如给div绑定，div里面有一个p，进入div时触发一次，进入p时再触发一次

 

mouseout()     //鼠标离开指定元素  及其子元素时  触发

//如给div绑定，div里面有一个p，

//进入div后，再进p，触发一次（因为离开了div）

//离开p后，来到div，触发一次（因为离开了p）

//最后离开div后，触发一次

 

mousemove()     //鼠标移动时触发（触发次数多）

$('#tt').mousemove(function(){
alert(12324);
});

 

scroll()     //当鼠标滚动 指定元素时触发

$('#tt').mousemove(function(){
alert(12324);
});

//给#tt设置固定高度，#tt里面内容一定要够多，给#tt设置overflow:auto（作用是内容溢出时产生滚动条）

 

键盘事件

keydown()     //键盘按下时触发

$(document).keydown(function(){      //这里的function有个event参数，需要的时候可以接收
alert(12324);
});

//如果给某个div元素绑定键盘事件，但是div没有输入框等产生焦点的地方，那么绑定的事件就不会生效

//打开网页时，焦点默认在document上

 

keyup()     //键盘松开时触发

$(document).keyup(function(){      //这里的function有个event参数，需要的时候可以接收
alert(12324);
});

 

不常用（慎用）

keypress()     //键盘按下时触发（兼容旧版浏览器）

$(document).keypress(function(){
alert(12324);
});

缺点：

//对中文输入法支持不好，无法响应中文输入

//无法响应系统功能键（如delete、backspace等等）

//keyCode与keydown和keyup不是很一致

 

 

其它事件

ready(fn)     //当某元素载入就绪后，执行fn函数

$(document).ready(function(){  //code  });     //当DOM载入就绪后，执行函数里面的内容

 

resize()     //当调整浏览器窗口大小时发生改变

$(window).resize(function(){ alert(123); });     //resize常用window搭配使用，换成其他对象则可能不生效。

 

focus()     //获得焦点时触发

$('input').focus(function(){ console.log('获得焦点'); });    //通常与input搭配使用

 

blur()      //失去焦点时触发

$('input').blur(function(){ console.log('失去获得焦点'); });    //通常与input搭配使用

 

change()     //当某元素发生改变后触发

$('input').change(function(){ console.log('value发生了改变'); });    //通常与input搭配使用

 

select()    //当某编辑框 内容被选中后触发

$('input').select(function(){ console.log('内容被选中了'); });    //一般与input、textarea等搭配使用

 

submit()    //当提交表单时，发生submit事件

提交表单

<input type="button" value="按钮">       //默认不可以提交，但是加了submit方法之后就可以了

$('input[type=button]').submit();

阻止表单提交

$('input[type=button]').submit(function(){  return false;  });      //只要在submit回调函数中返回false就可以阻止表单提交

提交表单时还可以做其他事情（如一些简单的验证）

$('input[type=button]').submit(function(){

if(a==b) return false;     //如果a等于b，表单就不能提交

});

注：在form中默认提交表单的方式

1、<input type = "submit" >

2、<button>提交</button>

 

 

事件参数

有些事件，如mousemove和keypress，我们需要获取鼠标的位置和按键的值，否则监听这些使劲按就没有什么意义了。

 

event()

所有事件都会传入event对象作为参数，可以从event对象上获取到更多的信息。如：

$(document).keydown( function(event){

console.log( event.keyCode );     //打印出按键的keyCode

} );

//除了keyCode外还有其他属性

 

 

事件绑定与取消

on( events,[selector,] [data,] fn )       //事件绑定（绑定一个或多个事件处理函数）

 

绑定一个事件的事件处理函数，如：

一般形式：$('input').focus(function(){ console.log('获得焦点'); });

on形式：   $(document).on( 'focus', 'input', function(){ console.log('获得焦点'); } );

 

 

绑定多个事件的事件处理函数，如：

$('a').add(document).on({
mouseenter : function(){},      //给a标签绑定的事件
keydown      : function(){}       //给document绑定的事件
});

 

//events表示：事件类型

//fn表示：执行函数

//selector(可选)表示：选择器元素。//好处：这里的选择器可以js动态生成

//data(可选)表示：传给事件处理函数的值

 

off( events,[selector],[fn] )         //事件取消（在选择元素上移除一个或多个事件的事件处理函数）

//只有用on绑定事件，才能用off移除

函数：function foc () {  console.log('获得焦点');  }

绑定：$(document).on('focus','input',foc);

取消：$(document).off( 'focus' , 'input',foc );

 

one( events,[selector],[fn] )        //事件绑定一次（绑定一个 一次性 的事件处理函数）

函数        ：function foc () {  console.log('获得焦点');  }

绑定一次：$(document).one('focus','input',foc);       //事件只会执行一次