事件函數(shù)列表
blur() 元素失去焦點
focus() 元素獲得焦點
change() 表單元素的值發(fā)生變化
click() 鼠標(biāo)單擊
dblclick() 鼠標(biāo)雙擊
mouseover() 鼠標(biāo)進入（進入子元素也觸發(fā)）
mouseout() 鼠標(biāo)離開（離開子元素也觸發(fā)）
mouseenter() 鼠標(biāo)進入（進入子元素不觸發(fā)）
mouseleave() 鼠標(biāo)離開（離開子元素不觸發(fā)）
hover() 同時為mouseenter和mouseleave事件指定處理函數(shù)
mouseup() 松開鼠標(biāo)
mousedown() 按下鼠標(biāo)
mousemove() 鼠標(biāo)在元素內(nèi)部移動
keydown() 按下鍵盤
keypress() 按下鍵盤
keyup() 松開鍵盤
load() 元素加載完畢
ready() DOM加載完成
resize() 瀏覽器窗口的大小發(fā)生改變
scroll() 滾動條的位置發(fā)生變化
select() 用戶選中文本框中的內(nèi)容
submit() 用戶遞交表單
toggle() 根據(jù)鼠標(biāo)點擊的次數(shù)扔仓，依次運行多個函數(shù)
unload() 用戶離開頁面
click事件
給元素綁定click事件播玖，可以用如下方法：
$('#btn1').click(function(){
// 內(nèi)部的this指的是原生對象
// 使用jquery對象用 $(this)
})
鼠標(biāo)移入移出事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠標(biāo)移入移出</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: gold;
margin: 100px auto 0;
}
.son{
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
/*進入子元素也觸發(fā)*/
/*$('#div1').mouseover(function() {
$(this).animate({marginTop: 50});//.stop()
});
$('#div1').mouseout(function() {
$(this).animate({marginTop: 100});//.stop()
});*/
/*進入子元素不觸發(fā)*/
/*$('#div1').mouseenter(function() {
$(this).stop().animate({marginTop: 50});//
});
$('#div1').mouseleave(function() {
$(this).stop().animate({marginTop: 100});//
});*/
/*通過hover（mouseenter+mouseleave）實現(xiàn)簡寫*/
$('#div1').hover(function() {
$(this).stop().animate({marginTop: 50});
}, function() {
$(this).stop().animate({marginTop: 100});
});
})
</script>
</head>
<body>
<div id="div1" class="box">
<div class="son"></div>
</div>
</body>
</html>
input框事件
- 一開始就獲取焦點椎工，相當(dāng)于設(shè)置了autofocus自動獲取焦點了。
$('#txt01').focus();
- 文本框獲取焦點的時候（有光標(biāo)閃爍的時候）
$('#txt01').focus(function() {
alert('focus');
});
- 失去焦點的時候（光標(biāo)離開的時候）
$('#txt01').blur(function() {
alert('blur');
});
- 輸入框內(nèi)容發(fā)生變化的時候蜀踏，失去焦點后觸發(fā)维蒙，可用于注冊時驗證用戶名是否已存在.
$('#txt01').change(function() {
alert('change');
});
- 松開鍵盤按鍵就觸發(fā)
$('#txt01').keyup(function() {
alert('keyup');
});
綁定事件
$(function(){
// //只能綁定click事件，不能綁定其他的了
// $('#btn').click(function() {
// /* Act on the event */
// });
//bind方式可綁定多個事件
$('#btn').bind('click mouseover', function() {
alert('hello!');
//取消綁定事件
$(this).unbind('mouseover');
});
})
自定義事件
$(function(){
//自定義事件只能用bind方式綁定果覆，第一個參數(shù)是事件的名字颅痊，第二個參數(shù)是事件發(fā)生時執(zhí)行的函數(shù)
$('#btn1').bind('hello', function(){
alert('hello');
})
$('#btn1').bind('click', function(){
alert('click');
})
$('#btn2').click(function() {
// trigger即可以觸發(fā)自定義事件，也可以觸發(fā)原始的事件
$('#btn1').trigger('hello');
$('#btn1').trigger('click');
});
//不一定點擊按鈕觸發(fā)局待，也可頁面加載時觸發(fā)斑响，也可在滿足某種if條件時觸發(fā)
// $('#btn1').trigger('hello');
})
其他事件
// //JS原生寫法
// window.onload = function(){
// }
// //jQuery寫法，等同于上面寫法
// $(window).load(function(){
// })
// //ready的寫法
// $(document).ready(function(){
// })
// //ready的簡寫
// $(function(){
// })
// 窗口改變尺寸的時候燎猛，會高頻觸發(fā)
$(window).resize(function() {
console.log('3');
});
事件冒泡
什么是事件冒泡恋捆？
在一個對象上觸發(fā)某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序重绷，那么此事件就會調(diào)用這個處理程序沸停，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播昭卓，從里到外愤钾，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層候醒，即document對象（有些瀏覽器是window）能颁。
事件冒泡的作用
事件冒泡允許多個操作被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子級元素上）倒淫，它還可以讓你在對象層的不同級別捕獲事件伙菊。
阻止事件冒泡
事件冒泡機制有時候是不需要的，需要阻止掉敌土，通過 event.stopPropagation() 來阻止
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
阻止默認(rèn)行為：阻止右鍵菜單
$(document).contextmenu(function(event) {
event.preventDefault();
或者 ：
return false;
});
合并阻止操作
實際開發(fā)中镜硕，一般把阻止冒泡和阻止默認(rèn)行為合并起來寫，合并寫法可以用
// event.stopPropagation();
// event.preventDefault();
// 合并寫法：
return false;
事件委托
事件委托就是利用冒泡的原理返干，把事件加到父級上兴枯，通過判斷事件來源的子集，執(zhí)行相應(yīng)的操作矩欠，事件委托首先可以極大減少事件綁定次數(shù)财剖，提高性能悠夯；其次可以讓新加入的子元素也可以擁有相同的操作。
一般綁定事件的寫法
$(function(){
$ali = $('#list li');
$ali.click(function(event) {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
事件委托的寫法
$(function(){
$list = $('#list');
$list.delegate('li', 'click', function(event) {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
取消事件委托
// ev.delegateTarge 委托對象
$(ev.delegateTarge).undelegate();
// 上面的例子可使用 $list.undelegate();
