1. 事件 前面我們介紹完js的事件流的概念之後，相信大家對事件流也有所瞭解了。那麼接下來我們看一下jquery的事件操作。 在說jquery的每個事件之前，我們先來看一下事件對象 。 1.1 事件對象 Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的 ...
1. 事件
前面我們介紹完js的事件流的概念之後，相信大家對事件流也有所瞭解了。那麼接下來我們看一下jquery的事件操作。
在說jquery的每個事件之前，我們先來看一下事件對象 。
1.1 事件對象
Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態。
1.什麼時候會產生Event 對象呢?
例如: 當用戶單擊某個元素的時候,我們給這個元素註冊的事件就會觸發,該事件的本質就是一個函數,而該函數的形參接收一個event對象。
2.事件通常與函數結合使用，函數不會在事件發生前被執行！
1.2 事件流的由來
由於微軟和網景亂搞，後來必須要為事件傳播機制，制定一個標準，因為事件捕獲是網景公司開發出來的，而事件冒泡是由微軟公司開發出來的，它們都想要自己的技術成為標準，所以導致這兩個公司老是乾架，制定標準的人為了不讓它們乾架，所以研發了事件流。
1.3 關於event對象
在觸發的事件的函數裡面我們會接收到一個event對象，通過該對象我們需要的一些參數，比如說我們需要知道此事件作用到誰身上了，就可以通過event的屬性target來獲取到(IE暫且不談)，或者想阻止瀏覽器的預設行為可以通過方法preventDefault()來進行阻止。以下是event對象的一些屬性和方法：
|
屬性 |
描述 |
|---|---|
|
altKey |
返回當事件被觸發時，”ALT” 是否被按下。 |
|
button |
返回當事件被觸發時，哪個滑鼠按鈕被點擊。 |
|
clientX |
返回當事件被觸發時，滑鼠指針的水平坐標。 |
|
clientY |
返回當事件被觸發時，滑鼠指針的垂直坐標。 |
|
ctrlKey |
返回當事件被觸發時，”CTRL” 鍵是否被按下。 |
|
metaKey |
返回當事件被觸發時，”meta” 鍵是否被按下。 |
|
relatedTarget |
返回與事件的目標節點相關的節點。 |
|
screenX |
返回當某個事件被觸發時，滑鼠指針的水平坐標。 |
|
screenY |
返回當某個事件被觸發時，滑鼠指針的垂直坐標。 |
|
shiftKey |
返回當事件被觸發時，”SHIFT” 鍵是否被按下 |
IE屬性(除了上面的滑鼠/事件屬性，IE 瀏覽器還支持下麵的屬性)。
|
屬性 |
描述 |
|---|---|
|
|
如果事件句柄想阻止事件傳播到包容對象，必須把該屬性設為 true。 |
|
fromElement |
對於 mouseover 和 mouseout 事件，fromElement 引用移出滑鼠的元素。 |
|
keyCode |
對於 keypress 事件，該屬性聲明瞭被敲擊的鍵生成的 Unicode 字元碼。對於 keydown 和 keyup |
|
offsetX,offsetY |
發生事件的地點在事件源元素的坐標系統中的 x 坐標和 y 坐標。 |
|
|
如果設置了該屬性，它的值比事件句柄的返回值優先順序高。把這個屬性設置為 |
|
|
對於生成事件的 Window 對象、Document 對象或 Element 對象的引用。 |
|
toElement |
對於 mouseover 和 mouseout 事件，該屬性引用移入滑鼠的元素。 |
|
x,y |
事件發生的位置的 x 坐標和 y 坐標，它們相對於用CSS動態定位的最內層包容元素。 |
標準 Event 屬性，下麵列出了 2 級 DOM 事件標准定義的屬性。
|
屬性和方法 |
描述 |
|---|---|
|
bubbles |
返回布爾值，指示事件是否是起泡事件類型。 |
|
|
返回布爾值，指示事件是否可擁可取消的預設動作。 |
|
|
返回其事件監聽器觸發該事件的元素。 |
|
eventPhase |
返回事件傳播的當前階段。 |
|
|
返回觸發此事件的元素（事件的目標節點）。 |
|
timeStamp |
返回事件生成的日期和時間。 |
|
|
返回當前 Event 對象表示的事件的名稱。 |
|
initEvent() |
初始化新創建的 Event 對象的屬性。 |
|
|
通知瀏覽器不要執行與事件關聯的預設動作。 |
|
|
不再派發事件。 |
1.4 Event對象的一些相容性寫法
獲得event對象相容性寫法 event || (event = window.event);
獲得target相容型寫法 event.target||event.srcElement
阻止瀏覽器預設行為相容性寫法 event.preventDefault ? event.preventDefault() : (event.returnValue = false);
阻止冒泡寫法 event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
2. 事件的綁定和解綁
2.1 綁定事件
語法：
bind(type,data,fn)
描述：為每一個匹配元素的特定事件（像click）綁定一個事件處理器函數。
參數解釋：
type (String) : 事件類型
data (Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外數據對象
fn ( Function) : 綁定到每個匹配元素的事件上面的處理函數
示例：
當每個p標簽被點擊的時候，彈出其文本
$("p").bind("click", function(){
alert( $(this).text() );
});
你可以在事件處理之前傳遞一些附加的數據。
function handler(event) { //event.data 可以獲取bind()方法的第二個參數的數據 alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler)
通過返回false來取消預設的行為並阻止事件起泡。
$("form").bind("submit", function() { return false; })
通過使用 preventDefault() 方法只取消預設的行為。
$("form").bind("submit", function(event){
event.preventDefault();
});
2.2 解綁事件
語法：
unbind(type,fn);
描述：
bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。如果沒有參數，則刪除所有綁定的事件。
如果把在綁定時傳遞的處理函數作為第二個參數，則只有這個特定的事件處理函數會被刪除。
參數解釋：
type (String) : (可選) 事件類型
fn(Function) : (可選) 要從每個匹配元素的事件中反綁定的事件處理函數
示例：
把所有段落的所有事件取消綁定
$("p").unbind()
將段落的click事件取消綁定
$("p").unbind( "click" )
刪除特定函數的綁定，將函數作為第二個參數傳入
var foo = function () { //綁定事件和解綁事件的事件處理函數 }; $("p").bind("click mouseenter", foo); // 給p段落綁定click mouseenter事件 $("p").unbind("click", foo); // 只解綁了p段落標簽的click事件
2.3 自定義事件
其實事件的綁定和解綁，都是我為了自定義事件做準備（大家把jQuery的提供的事件熟記在心），以後對jquery熟了以後，可以玩一下自定義事件
語法：
trigger(type,data);
描述：在每一個匹配的元素上觸發某類事件，它觸發的是由bind()註冊的自定義事件。
參數解釋：
type (String) : 要觸發的事件類型
data (Array) : (可選)傳遞給事件處理函數的附加參數
示例：
給一個按鈕添加自定義的事件
$('button').bind('myClick',function(ev,a,b){
//給button按鈕添加的自定義事件myClick事件
})
然後通過trigger()觸發自定義的事件
$('button').trigger('myClick',[1,2])
3. 事件委托(代理)
通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。
舉個列子：有三個同事預計會在周一收到快遞。為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞；二是委托給前臺MM代為簽收。現實當中，我們大都採用委托的方案（公司也不會容忍那麼多員工站在門口就為了等快遞）。前臺MM收到快遞後，她會判斷收件人是誰，然後按照收件人的要求簽收，甚至代為付款。這種方案還有一個優勢，那就是即使公司里來了新員工（不管多少），前臺MM也會在收到寄給新員工的快遞後核實並代為簽收。
原理：
利用冒泡的原理，把事件加到父級上，觸發執行效果。
作用：
1.性能要好
2.針對新創建的元素，直接可以擁有事件
事件源 :
跟this作用一樣(他不用看指向問題，誰操作的就是誰)，event對象下的。
使用情景：
為DOM中的很多元素綁定相同事件。
為DOM中尚不存在的元素綁定事件。
示例：
<body>
<ul>
<li class="luffy">路飛</li>
<li>路飛</li>
<li>路飛</li>
</ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//通過on()方法
$('ul').on('click','#namei,.luffy',function(){
console.log(this);
})
//未來追加的元素
$('ul').append('<a id="namei">娜美</a>')
}
</script>
語法：
on(type,selector,data,fn);
描述：在選定的元素上綁定一個或多個事件處理函數
參數解釋：
events( String) : 一個或多個空格分隔的事件類型
selector( String) : 一個選擇器字元串，用於過濾出被選中的元素中能觸發事件的後代元素
data: 當一個事件被觸發時，要傳遞給事件處理函數的event.data。
fn:回調函數
