jQuery--基础事件

http://edu.51cto.com/lesson/id-14474.html

常用事件：click、 dblclick、mousedown、 mouseup、 mousemove、 mouseover、 mouseout、 change、 select、 submit、 keydown、
keypress、keyup、blur、focus、load、resize、scroll、error。

绑定事件：.bind(type, [data], fn);

//type：事件名字符串，可以是一个或多个字符串；

//data：可选,作为event.data属性值传递一个额外的数据，该数据可以是一个字符串、一个数字、数字或对象；

//fn：处理函数

如：

$('div').bind("mouseleave", "mystring", function(event){
$('strong').html('leave. '+event.data);//event.data对应mystring.
});

$('input').bind('click mouseover', function(){});

解除绑定：unbind();//无参数则删除所有类型的事件及其处理函数；如果有一个参数（必须是type）则删除该类型事件；如果有两个参数（type,fn）则删除type类型的处理函数fn。

注意：.mouseover()/.mouseout()分别表示鼠标进入和移出的事件。

.mouseenter()/.mouseleave()则表示鼠标穿过和穿出的事件。

它们的区别在于：

1、绑定.mouseover()/.mouseout()事件的元素，其所有子元素都会触发该事件；

2、而绑定.mouseenter()/.mouseleave()事件的元素，其所有子元素并不会触发该事件；

实例：

<div id="div1" style="width:500px;height:500px;background:green;">
<p id="p1" style="width:100px;height:100px;background:red;"></p>
    <p id="p2" style="width:100px;height:100px;background:gray;"></p>
</div>
<strong></strong>

$('div').bind("mouseout", "mystring", function(event){
$('strong').html($('strong').html()+'leave. '+$(this ).attr('id')+" " );
}).bind("mouseover", "mystring", function(event){
$('strong').html($('strong').html()+'over. '+$(this ).attr('id') +" " );

});

当使用.mouseenter()/.mouseleave()时，鼠标在整个div对应的区域（包括绿色区域和红色区域）移动，都不会触发事件；

而使用.mouseover()/.mouseout()时，鼠标在绿色区域移动，不会触发事件；但在绿色区域和红色区域之间移动时却会触发事件；

.keydown()/.keyup()返回的是键码，而.keypress()返回的是字符编码。

$('input').keydown(function(e){

alert(e.keyCode);//a字母对应65

});

$('input').keypress(function(e){

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

});

.focus()和.blur()分别表示光标激活和丢失，事件触发时机是当前元素。

而.focusin()和.focusout()也表示光标激活和丢失，但事件触发时机可以是子元素。

其区别和.mouseover()和.mouseenter()一致。

三、复合对象

$(document).ready(fn);//当页面DOM加载完毕触发事件

$('div').hover(fn1,fn2);//当鼠标移入触发第一个fn1，移出时触发fn2

注：.hover()方法是结合了.mouseenter()和.mouseleave()方法。