### 1、jquery頁面載入事件
**1、傳統加載事件**
~~~
<body onload=”函數名()”> 頁面全部html和css代碼加載完成之后再調用指定的onload函數
window.onload = function(){
加載過程
}
~~~
**2、jquery實現加載事件**
~~~
① $(document).ready(function(){加載代碼});
② $().ready(function(){加載代碼});
③ $(function(){加載代碼}); ----- jQuery.fn.init
~~~
第三種方式是對前兩種方法封裝的簡便實用方法
~~~
//jquery加載事件
//第一種使用
$(document).ready(function(){
//加載過程代碼
alert('abc');
});
//第二種使用
$().ready(function(){
alert('hello');
});
//第三種使用
$(function(){
alert('china');
});
$(function(){
alert('beijing');
});
~~~
**3、jquery加載與傳統加載區別**
① jquery加載事件可以同時使用多個,傳統只有一個
1. 多個人可以定義各自的加載事件
1. jquery加載事件都放入一個數組里邊,遍歷數組
1. 傳統方式加載事件是存入一個變量里邊,多次使用變量值被覆蓋
② jquery加載事件比傳統加載事件執行速度快
1. jquery加載事件執行時間點,dom樹結構在內存中繪制完畢就執行加載
1. 傳統方式加載執行時間點,全部內容在瀏覽器里邊呈現出來才會執行

jquery加載事件捕捉的時間點不一樣
- 內容繪制完畢之后就捕捉時間 DOMContentLoaded
- 傳統方式是內容在瀏覽器顯示完畢之后再來捕捉window.onload
jquery內部原理模擬:
~~~
//模擬jQuery的加載事件行為
document.addEventListener("DOMContentLoaed", function(){alert("abcd")});
~~~
給當前應用設置一個事件DOMContentLoaded,dom樹結構在內存繪制完畢就執行一些過程。
### 2、jquery事件綁定(bind的省略)
**1、原生js的時間綁定**
~~~
<input type=”text” onclick=”f1()” /> 缺點:結構和行為沒有分離
document.getElementById(‘id’).onclick=f1; 結構和行為分離
document.getElementById(‘id’).addEventListener(‘click’, function(){}); 主流瀏覽器
.attachEvent(“onclick”,fucntion(){}); IE事件綁定
~~~
**2、jquery事件綁定**(input框設置點擊事件click)
~~~
$(“input”).click(function(){});
$(“input”).mouseover(function(){});
~~~
在jquery里邊把普通時間名字的on去掉,就是jquery對應的事件方法名字
注意:
~~~
$(“input”).click(fn); 給input框設置事件
$(“input”).click(); 觸發input框的click事件執行
$(“div”).mouseover(); 觸發div的鼠標移入事件執行
~~~
~~~
$(function(){
$("#result").click(function(){
console.log('click');
});
$("#result").mouseover(function(){
//觸發點擊事件一并執行
$(this).click();
console.log('mouseover');
});
});
~~~
鼠標移入div后會觸發點擊事件執行
### 3、jquery事件綁定(bind綁定)
上述講的事件綁定方法有:
~~~
<input onclick=”f1()”>
document.getElementById(“#apple”).click = function(){}
document.getElementById(“#pear”).addEventListener(‘click’,function(){});
$(選擇器).click(function(){});//bind的省略形式
~~~
jQuery定義了bind()方法作為統一的接口,用來為每一個匹配元素綁定事件處理程序。其基本語法:
~~~
bind(type,[data],fn);
~~~
其中參數type表示事件類型,參數data是可選參數,它可以作為event.data屬性值傳遞給事件對象的額外數據對象。參數fn表示事件處理函數。
bind方法與之前事件綁定不同之處:
**1. 事件綁定和取消**
(1) 可以為多個不同的事件類型,綁定同一個處理過程
~~~
a) $(“#apple”).bind(“click mouseover mouseout”,function(){事件處理});
b) 多個不同類型事件中間使用單個空格分隔。
~~~
(2). 可以為同一個對象同時綁定多個不同類型事件
~~~
a) $(“#apple”).bind({click:fn, mouseover:fn, mouseout:fn});
b) bind(json對象)
~~~
(3). 可以為同一個對象的同一類型事件綁定多個處理過程
~~~
a) $(“#apple”).bind(‘click’,fn1);
b) $(“#apple”).bind(‘click’,fn2);
~~~
(4). 可以靈活取消事件綁定
~~~
a) 全部事件都取消
i. $(“#apple”).unbind();
b) 可以取消指定類型取消
i. $(“#apple”).unbind(‘click’);
c) 可以取消指定類型指定處理過程事件
i. $(“#apple”).unbind(‘click’,fn1);
d) 第三項事件取消注意:
$(“div”).bind(‘click’,function(){}); 不靈
function f1(){}
$(“div”).bind(‘click’,f1); 有效
~~~
示例:
~~~
<script>
function a(){
alert("ok, I see");
}
function b(){
alert("ok, you see");
}
function f1(){
//$("div").bind(事件類型[,事件傳遞參數],事件處理);
//①綁定多個同類型事件
//事件可以使用匿名函數表達式,也可以使用函數指針
$("div").bind('click',a);
$("div").bind('click',b);
//② 同時為多個事件綁定相同的處理過程
$("div").bind("click mouseover mouseout",function(){
$("#result").append('hello');
});
//③ 同時綁定不同事件
$("div").bind({
click:function(){ $("#result").append('click') },
mouseover:function(){ $("#result").append('over') },
mouseout:function(){ $("#result").append('out') }
});
}
function del(){
//全部取消
//$("div").unbind();
//取消指定事件
//$("div").unbind('mouseover');
//取消指定事件具體處理程序
$("div").unbind("click",a);
}
</script>
<body>
<div>bread and milk</div>
<input type="button" value="觸發" onclick="f1()"/>
<input type="button" value="取消" onclick="del()"/>
<span id="result"></span>
</body>
~~~
**2. 事件綁定參數**
~~~
$(“div”).bind(‘click’,{json對象參數}, function(evt){
//參數具體使用
evt.data.對象屬性名稱;
});
~~~
示例:
~~~
<script>
function f1(){
//$("div").bind(事件類型[,事件傳遞參數],事件處理);
var name = "tom";
$("div").bind('click',{name:'tom',age:33},function(evt){
//evt就是event事件對象
alert(evt.data.name);//tom
alert(evt.data.age);//33
});
//name被復制了一份傳遞給nm
$("div").bind('click',{nm:name},function(evt){
//evt就是event事件對象
alert(name);
alert(evt.data.nm); //tom
});
name = "jack";
//name被復制了一份傳遞給nm
$("#btn").bind('click',{nm:name},function(evt){
//使用參數name
alert(name);
alert(evt.data.nm); //jack
});
}
//tom jack
//jack jack //內存中只有一個name值為jack
// div設置事件的時候,內部并沒有執行函數(只是做了一個聲明),name也沒有被訪問
// 等待事件被觸發的時候,name的值已經變為jack
</script>
<body>
<div>bread and milk</div>
<input type="button" value="元素" id="btn" />
<input type="button" value="觸發" onclick="f1()"/>
<span id="result"></span>
</body>
~~~
**3.事件觸發模擬**
用戶出發觸發事件執行:
~~~
$(“form”).submit();
~~~
模擬用戶觸發事件執行trigger():
具體用法:
trigger(type, [data])===>只需將你的type設置為自定義的事件即可。
~~~
$(“form”).trigger(‘submit’);
$(“form”).triggerHandler(‘submit’);(沒有瀏覽器默認動作)
~~~
triggerHandler() 只會執行具體事件,沒有瀏覽器默認動作
例如:表單有提交事件
表單通過按鈕真實被提交后發生的事情
① 執行“ok,馬上出發”彈出框(提交事件的處理程序執行)
② 瀏覽器需要提交給下個頁面(瀏覽器默認動作)
~~~
$(function(){
$("form").bind("submit",function(){
alert("ok, i go quickly");
});
});
function f1(){
//trigger 觸發器
$("form").trigger("submit");
$("form").trigger("submit");//觸發指定事件執行,同時有瀏覽器默認動作
//$("form").triggerHandler("submit");
$("form").triggerHandler("submit");//觸發指定事件執行,不會執行瀏覽器默認動作
}
~~~
trigger()還可以出發自定義時間
### 4、阻止瀏覽器默認動作
瀏覽器默認動作:表單提交,頁面重定向, `<a>`標簽的超鏈接
利用提交事件可以實現表單域驗證,通過頁面就跳轉,否則頁面要停止跳轉
阻止瀏覽器默認動作有兩種方式:
① return false; //也可以阻止事件冒泡
② event.preventDefault(); //推薦使用
~~~
$(function(){
//表單提交需要驗證表單域,正確就可以提交走,否則沒有瀏覽器默認動作
$("form").bind('submit',function(evt){
//對表單域進行驗證,
//用戶名不正確
alert('用戶名不正確');
//return false;
evt.preventDefault();//阻止瀏覽器默認動作
});
});
~~~
### 5、阻止事件冒泡
html
—>head
———>body
—————–>div
————————>input
input和div都有點擊事件,由于事件冒泡作用,input框被點擊觸發事件之后,div的點擊事件也要被觸發。
有的時候根據需要不要進行事件冒泡,需要對其進行阻止
事件冒泡阻止:
① return false; 容易與“瀏覽器默認動作阻止“混淆
② event.stopPropagation(); 阻止事件冒泡
~~~
$(function(){
$("div").bind('click',function(){
alert("divdiv");
});
$("input").bind('click',function(evt){
alert("inputinput");
//阻止事件冒泡
//return false;
evt.stopPropagation();
});
});
~~~
### 6、事件委派與解除委派
事件委派與事件綁定效果一致,解除委派與時間取消類似。
~~~
$().bind(type,fn);
$().live(type,fn);
$().die(type,fn);//不帶參數就是解除live事件,如果帶了參數type,那會移除相應的live事件,如果同時指定了第二個參數,則只能移除指定事件的處理函數。
~~~
“事件委派“較比”事件綁定“不同之處:
**使用事件委派,后增加的兄弟元素也有相同的事件被設置。**
~~~
<script type="text/javascript">
$(function(){
//使用live事件委派,增加的元素也有與兄弟一樣的事件
$("li").live('click',function(){
//li被點擊輸出自己的文本內容
alert($(this).html());
});
});
//方法聲明要在加載事件外部,否則會訪問不到
function f1(){
$("ul").append("<li>北京</li>");
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:pink;}
</style>
<body>
<ul>
<li>天</li>
<li>角</li>
<li>涯</li>
<li>海</li>
</ul>
<input type="button" value="增加" onclick="f1()" />
</body>
~~~
### 7、事件合并
Query有兩個合成事件—-hover()和toggle(),這兩個方法都是jQuery自定義的方法
**1、hover()方法**
語法結構為 hover(enter,leave)
hover()方法用于模擬光標懸停事件。當光標移動到元素上時,會觸發指定的第一個函數,離開時觸發第二個函數。
這個函數很好理解,而且實際開發中會有很多妙用。
~~~
<ul>
<li>天</li>
<li>角</li>
<li>涯</li>
<li>海</li>
</ul>
~~~
鼠標移動在每個li身上,有高亮效果
本質:每個li都有鼠標移入和移出事件,有三種實現方法
1、第一種方式:
~~~
$(“li”).each(function(){
$(this).mouseover(fn);
$(this).mouseout(fn);
});
~~~
第二種方式:
~~~
$(“li”).mouseover(fn)
$(“li”).mouseout(fn)
~~~
第三種方式:hover()
該方法就是對mouseover和mouseout兩個事件封裝的簡便使用
~~~
$(“li“).hover(兩個函數參數:移入和移出函數);
$(“li”).hover(
function(){},
function(){}
);
~~~
~~~
<script>
$(function(){
$("li").hover(
function()
{
$(this).css('background-color','lightblue');
},
function()
{
$(this).css("background-color","");
}
);
});
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:pink;}
</style>
<body>
<ul>
<li>天</li>
<li>角</li>
<li>涯</li>
<li>海</li>
</ul>
</body>
~~~
**2、toggle()方法**
語法結構 `toggle(fn1,fn2,fn3...fnN)`
toggle()方法用于模擬鼠標連續單擊事件,第一次單擊事件觸發指定的第一個函數,第二次就觸發第二個函數…. 如果有更多的函數則依次觸發,直到最后一個。隨后的每次單擊都是對這幾個函數的輪番調用。
看到這個方法第一想到的是toggleClass() 用于給元素對象切換樣式。
toggle方法也是挺好理解的,以前項目中倒是沒有應用過。舉個例子:
~~~
<html>
<head>
<title> unbind() </title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$("input").toggle(
function(){$("ul").append($("<li><h2>左 慈</h2></li>"))},
function(){$("ul").append($("<li><h2>曹 沖</h2></li>"))},
function(){$("ul").append($("<li><h2>神周瑜</h2></li>"))},
function(){$("ul").append($("<li><h2>神曹操</h2></li>"))},
function(){$("ul").append($("<li><h2>孫尚香</h2></li>"))},
function(){$("ul").append($("<li><h2>神關羽</h2></li>"));$(this).unbind()}
)
})
//-->
</script>
</head>
<body>
<h1>三國殺變態武將</h1>
<div >
<ul>
</ul>
</div>
<input type="button" value="連續點擊按鈕可切換事件" >
</body>
</html></span>
~~~
注意:在上例中引用的jquery庫不是以前常用的jquery-2.1.0.min.js了,是因為在jquery1.9版本中將toggle()的切換功能去掉了,現在toggle這個功能只能控制元素的顯隱。
### 8、事件命名空間
jQuery支持事件命名空間以方便管理事件。例如,在下面示例中為div元素綁定多個事件類型,然后使用命名空間進行規范,從而方便管理。所謂事件命名空間,就是在事件類型后面以點語法附加一個別名,以便于引用事件,如,click.a ,其中a就是click當前事件的別名。
~~~
<html>
<head>
<title> jQuery命名空間 </title>
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$("div").bind("click.a",function(){
$("body").append("<p>click事件<p/>")
});
$("div").bind("dblclick.a",function(){
$("body").append("<p>dblclick事件<p/>")
});
$("div").bind("mouseover.a",function(){
$("body").append("<p>mouseover<p/>")
});
$("div").bind("mouseout.a",function(){
$("body").append("<p>mouseout<p/>")
});
})
//-->
</script>
</head>
<body >
<div id="" class="">
jQuery命名空間
</div>
</body>
</html>
~~~
我們為div綁定的幾個事件都指定了命名空間,這樣在刪除事件的時候,就可以直接指定命名空間即可。例如調用下面一行代碼就可以把上面綁定的事件全部刪除:
~~~
$("div").unbind(".a");
~~~
同樣,假如我們為click事件類型指定了不同的命名空間,那么當我們只想刪一個的時候只要指定它的命名空間即可。