快捷導航

jQuery事件_動力節(jié)點Java學院整理

更新時間：2017年07月05日 10:21:50 作者：liaoxuefeng

這篇文章主要為大家詳細介紹了jQuery事件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

因為JavaScript在瀏覽器中以單線程模式運行，頁面加載后，一旦頁面上所有的JavaScript代碼被執(zhí)行完后，就只能依賴觸發(fā)事件來執(zhí)行JavaScript代碼。

瀏覽器在接收到用戶的鼠標或鍵盤輸入后，會自動在對應(yīng)的DOM節(jié)點上觸發(fā)相應(yīng)的事件。如果該節(jié)點已經(jīng)綁定了對應(yīng)的JavaScript處理函數(shù)，該函數(shù)就會自動調(diào)用。

由于不同的瀏覽器綁定事件的代碼都不太一樣，所以用jQuery來寫代碼，就屏蔽了不同瀏覽器的差異，我們總是編寫相同的代碼。

舉個例子，假設(shè)要在用戶點擊了超鏈接時彈出提示框，我們用jQuery這樣綁定一個click事件：

/* HTML:
 *
 * <a id="test-link" href="#0" rel="external nofollow" >點我試試</a>
 *
 */

// 獲取超鏈接的jQuery對象:
var a = $('#test-link');
a.on('click', function () {
 alert('Hello!');
});

on方法用來綁定一個事件，我們需要傳入事件名稱和對應(yīng)的處理函數(shù)。
另一種更簡化的寫法是直接調(diào)用click()方法：

a.click(function () {
 alert('Hello!');
});

兩者完全等價。我們通常用后面的寫法。

jQuery能夠綁定的事件主要包括：

鼠標事件

click: 鼠標單擊時觸發(fā)； dblclick：鼠標雙擊時觸發(fā)； mouseenter：鼠標進入時觸發(fā)； mouseleave：鼠標移出時觸發(fā)； mousemove：鼠標在DOM內(nèi)部移動時觸發(fā)； hover：鼠標進入和退出時觸發(fā)兩個函數(shù)，相當于mouseenter加上mouseleave。

鍵盤事件

鍵盤事件僅作用在當前焦點的DOM上，通常是<input>和<textarea>。
keydown：鍵盤按下時觸發(fā)； keyup：鍵盤松開時觸發(fā)； keypress：按一次鍵后觸發(fā)。

其他事件

focus：當DOM獲得焦點時觸發(fā)； blur：當DOM失去焦點時觸發(fā)； change：當<input>、<select>或<textarea>的內(nèi)容改變時觸發(fā)； submit：當<form>提交時觸發(fā)； ready：當頁面被載入并且DOM樹完成初始化后觸發(fā)。
其中，ready僅作用于document對象。由于ready事件在DOM完成初始化后觸發(fā)，且只觸發(fā)一次，所以非常適合用來寫其他的初始化代碼。假設(shè)我們想給一個<form>表單綁定submit事件，下面的代碼沒有預(yù)期的效果：

<html>
<head>
 <script>
  // 代碼有誤:
  $('#testForm).on('submit', function () {
   alert('submit!');
  });
 </script>
</head>
<body>
 <form id="testForm">
  ...
 </form>
</body>

因為JavaScript在此執(zhí)行的時候，<form>尚未載入瀏覽器，所以$('#testForm)返回[]，并沒有綁定事件到任何DOM上。
所以我們自己的初始化代碼必須放到document對象的ready事件中，保證DOM已完成初始化：

<html>
<head>
 <script>
  $(document).on('ready', function () {
   $('#testForm).on('submit', function () {
    alert('submit!');
   });
  });
 </script>
</head>
<body>
 <form id="testForm">
  ...
 </form>
</body>

這樣寫就沒有問題了。因為相關(guān)代碼會在DOM樹初始化后再執(zhí)行。
由于ready事件使用非常普遍，所以可以這樣簡化：

$(document).ready(function () {
 // on('submit', function)也可以簡化:
 $('#testForm).submit(function () {
  alert('submit!');
 });
});

甚至還可以再簡化為：

$(function () {
 // init...
});

上面的這種寫法最為常見。如果你遇到$(function () {...})的形式，牢記這是document對象的ready事件處理函數(shù)。
完全可以反復綁定事件處理函數(shù)，它們會依次執(zhí)行：

$(function () {
 console.log('init A...');
});
$(function () {
 console.log('init B...');
});
$(function () {
 console.log('init C...');
});

事件參數(shù)

有些事件，如mousemove和keypress，我們需要獲取鼠標位置和按鍵的值，否則監(jiān)聽這些事件就沒什么意義了。所有事件都會傳入Event對象作為參數(shù)，可以從Event對象上獲取到更多的信息：

$(function () {
 $('#testMouseMoveDiv').mousemove(function (e) {
  $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
 });
});

取消綁定

一個已被綁定的事件可以解除綁定，通過off('click', function)實現(xiàn)：

function hello() {
 alert('hello!');
}

a.click(hello); // 綁定事件

// 10秒鐘后解除綁定:
setTimeout(function () {
 a.off('click', hello);
}, 10000);

需要特別注意的是，下面這種寫法是無效的：

// 綁定事件:
a.click(function () {
 alert('hello!');
});

// 解除綁定:
a.off('click', function () {
 alert('hello!');
});

這是因為兩個匿名函數(shù)雖然長得一模一樣，但是它們是兩個不同的函數(shù)對象，off('click', function () {...})無法移除已綁定的第一個匿名函數(shù)。

為了實現(xiàn)移除效果，可以使用off('click')一次性移除已綁定的click事件的所有處理函數(shù)。

同理，無參數(shù)調(diào)用off()一次性移除已綁定的所有類型的事件處理函數(shù)。

事件觸發(fā)條件

一個需要注意的問題是，事件的觸發(fā)總是由用戶操作引發(fā)的。例如，我們監(jiān)控文本框的內(nèi)容改動：

var input = $('#test-input');
input.change(function () {
 console.log('changed...');
});

當用戶在文本框中輸入時，就會觸發(fā)change事件。但是，如果用JavaScript代碼去改動文本框的值，將不會觸發(fā)change事件：

var input = $('#test-input');
input.val('change it!'); // 無法觸發(fā)change事件

有些時候，我們希望用代碼觸發(fā)change事件，可以直接調(diào)用無參數(shù)的change()方法來觸發(fā)該事件：

var input = $('#test-input');
input.val('change it!');
input.change(); // 觸發(fā)change事件

input.change()相當于input.trigger('change')，它是trigger()方法的簡寫。

為什么我們希望手動觸發(fā)一個事件呢？如果不這么做，很多時候，我們就得寫兩份一模一樣的代碼。

瀏覽器安全限制

在瀏覽器中，有些JavaScript代碼只有在用戶觸發(fā)下才能執(zhí)行，例如，window.open()函數(shù)：

// 無法彈出新窗口，將被瀏覽器屏蔽:
$(function () {
 window.open('/');
});

這些“敏感代碼”只能由用戶操作來觸發(fā)：

var button1 = $('#testPopupButton1');
var button2 = $('#testPopupButton2');

function popupTestWindow() {
 window.open('/');
}

button1.click(function () {
 popupTestWindow();
});

button2.click(function () {
 // 不立刻執(zhí)行popupTestWindow()，100毫秒后執(zhí)行:
 setTimeout(popupTestWindow, 100);
});

當用戶點擊button1時，click事件被觸發(fā)，由于popupTestWindow()在click事件處理函數(shù)內(nèi)執(zhí)行，這是瀏覽器允許的，而button2的click事件并未立刻執(zhí)行popupTestWindow()，延遲執(zhí)行的popupTestWindow()將被瀏覽器攔截。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: