（jQuery） jQuery中的事件與動畫（上）

時間 2019-12-07

標籤 jquery 事件動畫欄目 JQuery 简体版

原文原文鏈接

1、事件

1.1 `$(document).ready()`與`window.onload`的比較

1.1.1 執行時機

$(document).ready()方法註冊的事件處理程序，在DOM徹底就緒時就能夠被調用，可是，這並不意味着這些元素關聯的文件都已經下載完畢，若是腳本中要獲取圖片的長度與寬度等屬性，請不要用此方法。html
window.onload方法是在網頁中全部的元素（包括元素的全部關聯文件）徹底加載到瀏覽器後才執行，即JS此時才能夠訪問網頁中的任何元素。jquery

1.1.2 屢次使用

$(document).ready()方法瀏覽器

function one() {
  alert('one');
}

function two() {
  alert('two');
}

$(document).ready(function() {
  one();
});

$(document).ready(function() {
  two();
});

運行代碼後，會先彈出字符串one對話框，而後再彈出字符串two對話框。app

window.onloadide

// 省略one與two函數的聲明
window.onload = one;
window.onload = two;

運行代碼後，只彈出字符串two對話框。由於load事件一次只能保存對一個函數的引用，它會自動用後面的函數覆蓋前面的函數。所以不能在如今的行爲上添加新的行爲。
能夠用下面的方法：函數

window.onload = function () {
  one();
  two();
}

雖然這樣的能解決某些問題，但仍是不能知足某些需求。例若有多個js文件，每一個文件都要用到window.onload方法，這種狀況下用上面的方法就會很是麻煩，而$(document).ready()就能夠處理這些狀況。this

1.2 事件綁定`bind`

bind(type [, data], fn)spa

type：事件類型，包括click、mousedown等。code
data：做爲event.data屬性傳遞給事件對象的額外數據對象，可選。htm
fn：用來綁定的處理函數。

$(function() {
  $('#panel h5.header').bind('mouseover', function(event) {
    $(this).next().show();
  }).bind('mouseout', function(event) {
    $(this).next().hide();
  });
});

1.3 合成事件

1.3.1 `hover()`方法

hover(enterFn, leaveFn)

hover()方法用於模擬光標懸停事件。當光標移動到元素上時，會觸發指定的第一個函數（enterFn)，當光標移出這個元素時，會觸發指定的第二個函數（leaveFn)。hover()方法替代的是bind('mouseenter')與bind('mouseleave')。

$(function() {
  $('.#panel h5.header').hover(function() {
    $(this).next().show();
  }, function() {
    $(this).next().hide();
  });
});

1.4 事件冒泡

1.4.1 什麼是冒泡

<body>
  <div class = "content">
    <span></span>
  </div>
</body>

// 爲span綁定事件
$('span').bind('click', function(event) {
  alert('Span is clicked.');
});
// 爲div綁定事件
$('.content').bind('click', function(event) {
  alert('Div is clicked.');
});
// 爲body綁定事件
$('body').bind('click', function(event) {
  alert('Body is clicked.');
});

當點擊<span>元素時，<span>、<div>、<body>元素的click事件依次被觸發。
事件會按照DOM的層次結構像水泡同樣不斷向上直至頂端。

1.4.2 事件冒泡引起的問題

中止事件冒泡
事件冒泡會引發預料以外的效果。可用stopPropagation()方法來中止冒泡。

$('span').bind('click', function(event) {
  event.stopPropagation();
  alert('Span is clicked.');
});

此時點擊<span>元素時，只會執行<span>的click事件。

阻止默認行爲
可用preventDefault()方法來阻止元素的默認行爲。

舉例，在項目中，常常須要驗證表單，在單擊「提交」按鈕時，驗證表單內容，例如某元素是不是必填字段，某元素長度是否夠6位等，當表單不符合提交條件時，要阻止表單的提交（默認行爲）。

$(function() {
  $('#sub').bind('click', function(event) {
    var username = $('#username').val();
    if (username === '') {
      $('#msg').html('<p>文框的值不能爲空</p>');
      event.preventDefault();
    }
  });
});

若是想同時對事件對象中止冒泡和默認行爲，能夠在事件處理函數return false。這是對在事件對象上同時調用stopPropagation()方法和event.preventDefault()。

事件捕獲
事件捕獲和事件冒泡是恰好相反的兩個過程，事件捕獲是從最頂端往下開始觸發。

並不是全部主流瀏覽器都支持事件捕獲，而且這個缺陷沒法經過js來修復。

1.6 移除事件

`unbind([type], [data]);

第一個參數是事件類型，第二個參數是將要移除的函數：

若是沒有參數，則刪除全部綁定的事件。
若是提供了事件類型做爲參數，則只刪除該類型的綁定事件。
若是把綁定時傳遞的函數做爲第二個參數，則只有這個特定的事件處理函數會被刪除。

1.7 `one()`方法

one(type, [data], fn)

one()方法的結構與bind()方法相似，使方法也與bind()方法相同。使用one()方法爲元素綁定事件後，只在第一次觸發事件時，處理函數才執行，以後的觸發毫無做用。

1.8 模擬操做

trigger(type, [data])

第一個參數是要觸發的事件類型
第二個參數是要傳遞給事件處理函數的附加數據

1.8.1 經常使用模擬

使用trigger()方法

$('#btn').trigger('click');
// or
$('#btn).click();

1.8.2 觸發自定義事件

$('#btn').bind('myClick', function () {
  // do sth
});

$('#btn').trigger('myClick');

1.8.3 傳遞數據

// 獲取數據
$('#btn').bind('myClick', function(event, msg1, msg2) {
  $('#test').append('<p>' + msg1 + msg2 + '</p>'); 
});

// 傳遞兩個數據
$('#btn').trigger('myClick', ['個人自定義', '事件']);

1.8.4 執行默認操做

trigger()方法觸發事件後，會執行瀏覽器默認操做。
若是隻想觸發綁定的事件，而不想執行瀏覽器的默認操做，可使用triggerHandler()方法。

$('input').triggerHandler('focus');

1.9 其餘用法

1.9.1 綁定多個事件類型

$(function() {
  $('div').bind('mouseover mouseout', function(event) {
    $(this).toggleClass('over');
  });
});

1.9.2 添加事件命名空間，便於管理

$(function() {
  $('div').bind('click.plugin', function(event) {
    $('body').append('<p>click event</p>');
  });
  $('div').bind('mouseover.plugin', function (event) {
    $('body').append('<p>mouseover event</p>');
  })
  $('div').bind('dbclick', function(event) {
    $('body').append('<p>dbclick event</p>');
  });
  $('button').bind('click', function(event) {
    $('div').unbind('.plugin');
  });
});

點擊<button>元素後，.plugin的命名空間被刪除，而dbclick事件依然存在。

1.9.3 相同事件名稱，不一樣命名空間執行方法

$(function() {
  $('div').bind('click', function(event) {
    $('body').append('<p>click event</p>');
  });
  $('div').bind('click.plugin', function(event) {
    $('body').append('<p>click.plugin event</p>');
  });
  $('button').bind('click', function(event) {
    $('div').trigger('click!'); // 注意click後面的歎號
  });
});

trigger('click!')中歎號的做用是隻觸發click事件，不觸發click.plugin事件。