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

時間 2019-11-19

標籤 web 前端基礎 jquery 欄目 HTML 简体版

原文原文鏈接

1. 事件

前面咱們介紹完js的事件流的概念以後，相信你們對事件流也有所瞭解了。那麼接下來咱們看一下jquery的事件操做。javascript

在說jquery的每一個事件以前，咱們先來看一下事件對象。java

1.1 事件對象

Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。jquery

1.何時會產生Event 對象呢? 瀏覽器

例如: 當用戶單擊某個元素的時候,咱們給這個元素註冊的事件就會觸發,該事件的本質就是一個函數,而該函數的形參接收一個event對象。app

2.事件一般與函數結合使用，函數不會在事件發生前被執行！函數

1.2 事件流的由來

因爲微軟和網景亂搞，後來必需要爲事件傳播機制，制定一個標準，由於事件捕獲是網景公司開發出來的，而事件冒泡是由微軟公司開發出來的，它們都想要本身的技術成爲標準，因此致使這兩個公司總是幹架，制定標準的人爲了避免讓它們幹架，因此研發了事件流。性能

1.3 關於event對象

在觸發的事件的函數裏面咱們會接收到一個event對象，經過該對象咱們須要的一些參數，好比說咱們須要知道此事件做用到誰身上了，就能夠經過event的屬性target來獲取到(IE暫且不談)，或者想阻止瀏覽器的默認行爲能夠經過方法preventDefault()來進行阻止。如下是event對象的一些屬性和方法：this

屬性spa	描述代理
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 = 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>

語法：