在前面的總結中，選擇器、過濾器、DOM的基本操作以及對錶單的操作都是在說定位元素的位置。後面，從這裏的總結開始，整理jQuery的事件。
頁面代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基礎事件</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo10.js"></script>
</head>
<body>
<input type="button" value="按鈕"/>
<div></div>
<form>
<input id="txt" type="text"/>
</form>
<div id="square"style="height:200px;width:200px;background:green">
<div id="smallSquare" style="height:100px;width:100px;background:red;"></div>
</div>
<div id="squ" style="height:200px;width:200px;background:yellow">
<input id="txtSqu" style="text"/>
</div>
<Strong></Strong>
</body>
</html>一、綁定事件
$(document).ready(function(){
$('input').bind('click',function(){ //綁定單擊事件
alert('單擊');
});
$('input').bind('click',fn); //綁定單擊事件
function fn(){
alert('單擊');
}
$('input').bind('dblclick',function(){ //綁定雙擊事件
alert('雙擊');
});
$('input').bind('mouseover mouseout', function(){ //綁定多個事件，鼠標移入、移出分別執行一次
$('div').html(function(index, value){
return value + 1;
})
})
$('input').bind({ //綁定多個事件，鼠標移入、移出分別執行
'mouseover':function(){
alert('鼠標移入');
},
'mouseout':function(){
alert('鼠標移出');
}
})
$('input').unbind(); //綁定解除，全部解除
$('input').bind('click mouseout',function(){ //綁定解除，解除指定事件
alert('移出');
})
$('input').unbind('click');
function fn1(){
alert('單擊1');
}
function fn2(){
alert('單擊2');
}
$('input').bind('click',fn1);
$('input').bind('click',fn2);
$('input').unbind('click',fn1); //綁定解除，解除指定事件
})二、簡寫事件
$(document).ready(function(){
$('input').click(function(){ //簡寫單擊事件
alert('單擊');
})
$('input').dblclick(function(){ //簡寫雙擊事件
alert('雙擊');
})
$('input').mousedown(function(){ //簡寫鼠標左鍵按下
alert('鼠標左鍵按下');
})
$('input').mouseup(function(){ //簡寫鼠標左鍵彈起
alert('鼠標左鍵彈起');
})
$(window).unload(function(){ //一般unload事件，新版瀏覽器不支持
alert('頁面卸載'); //一般用於清理工作
})
$(window).resize(function(){ //窗口大小改變時，觸發
alert('文檔改變了');
})
$('#txt').select(function(){ //選定文本時觸發
alert('文本選定');
})
$('#txt').change(function(){ //文本改變時觸發(需要失去焦點)
alert('文本改變');
})
$('form').submit(function(){ //表單提交時，觸發(在谷歌瀏覽器，沒反應)
alert('表單提交');
});
$('#square').mouseover(function(){ //鼠標移入,穿過子元素會觸發
$('Strong').html(function(index, value){
return value + '1';
});
});
$('#square').mouseout(function(){
$('Strong').html(function(index, value){ //鼠標移出
return value + '1';
})
});
$('#square').mouseenter(function(){ //鼠標移入，穿過子元素不會觸發
$('Strong').html(function(index, value){
return value + '1';
})
});
$('#square').mouseleave(function(){ //鼠標移出
$('Strong').html(function(index, value){
return value + '1';
})
})
$('#txt').keydown(function(e){ //按下鍵盤，返回鍵碼
alert(e.keyCode);
})
$('#txt').keyup(function(e){ //彈起鍵碼，返回鍵碼
alert(e.keyCode);
})
$('#txt').keypress(function(e){ //按下鍵碼，返回字符編碼
alert(e.charCode);
})
$('#txtSqu').focus(function(){ //光標激活，綁定div，不觸發
$('Strong').html(function(index, value){
return '光標激活';
})
})
$('#txtSqu').blur(function(){
$('Strong').html(function(index, value){ //光標丟失
return '光標丟失';
})
})
$('#txtSqu').focusin(function(){ //光標激活，綁定div，也觸發
$('Strong').html(function(index, value){
return '光標激活';
})
})
$('#txtSqu').focusout(function(){ //光標失去
$('Strong').html(function(index, value){
return '光標失去';
})
})
})三、複合事件
$(function(){
$('#square').hover(function(){ //mouseenter效果
$(this).css('background','yellow');
},function(){
$(this).css('background','purple'); //mouseout效果
})
})