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 瀏覽器還支持下面的屬性)，

屬性	描述
`cancelBubble`	如果事件句柄想阻止事件傳播到包容物件，必須把該屬性設為 true，
fromElement	對于 mouseover 和 mouseout 事件，fromElement 參考移出滑鼠的元素，
keyCode	對于 keypress 事件，該屬性宣告了被敲擊的鍵生成的 Unicode 字符碼，對于 keydown 和 keyup
offsetX,offsetY	發生事件的地點在事件源元素的坐標系統中的 x 坐標和 y 坐標，
`returnValue`	如果設定了該屬性，它的值比事件句柄的回傳值優先級高，把這個屬性設定為
`srcElement`	對于生成事件的 Window 物件、Document 物件或 Element 物件的參考，
toElement	對于 mouseover 和 mouseout 事件，該屬性參考移入滑鼠的元素，
x,y	事件發生的位置的 x 坐標和 y 坐標，它們相對于用CSS動態定位的最內層包容元素，

標準 Event 屬性，下面列出了 2 級 DOM 事件標準定義的屬性，

屬性和方法	描述
bubbles	回傳布林值，指示事件是否是起泡事件型別，
`cancelable`	回傳布林值，指示事件是否可擁可取消的默認動作，
`currentTarget`	回傳其事件監聽器觸發該事件的元素，
eventPhase	回傳事件傳播的當前階段，
`target`	回傳觸發此事件的元素（事件的目標節點），
timeStamp	回傳事件生成的日期和時間，
`type`	回傳當前 Event 物件表示的事件的名稱，
initEvent()	初始化新創建的 Event 物件的屬性，
`preventDefault()`	通知瀏覽器不要執行與事件關聯的默認動作，
`stopPropagation()`	不再派發事件，

1.4 Event物件的一些兼容性寫法

獲得event物件兼容性寫法
event || (event = window.event);

獲得target兼容型寫法
event.target||event.srcElement

阻止瀏覽器默認行為兼容性寫法
event.preventDefault ? event.preventDefault() : (event.returnValue = https://www.cnblogs.com/liuhui0308/p/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 >路飛</li>
            <li>路飛</li>
            <li>路飛</li>
            
        </ul>
</body>
<script src="https://www.cnblogs.com/liuhui0308/p/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:回呼函式

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31452.html

標籤：jQuery

上一篇：徹底拋棄 jQuery ，不然還留著過年？

下一篇：Web前端基礎(19):jQuery基礎(六)

Web前端基礎(18):jQuery基礎(五)

1. 事件

1.1 事件物件

1.2 事件流的由來

1.3 關于event物件

1.4 Event物件的一些兼容性寫法

2. 事件的系結和解綁

2.1 系結事件

2.2 解綁事件

2.3 自定義事件

3. 事件委托(代理)