DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> jQuery事件_動力節點Java學院整理
jQuery事件_動力節點Java學院整理
編輯:JQuery入門技巧     

因為JavaScript在浏覽器中以單線程模式運行,頁面加載後,一旦頁面上所有的JavaScript代碼被執行完後,就只能依賴觸發事件來執行JavaScript代碼。

浏覽器在接收到用戶的鼠標或鍵盤輸入後,會自動在對應的DOM節點上觸發相應的事件。如果該節點已經綁定了對應的JavaScript處理函數,該函數就會自動調用。

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

舉個例子,假設要在用戶點擊了超鏈接時彈出提示框,我們用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方法用來綁定一個事件,我們需要傳入事件名稱和對應的處理函數。
另一種更簡化的寫法是直接調用click()方法:

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

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

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

鼠標事件

click: 鼠標單擊時觸發; dblclick:鼠標雙擊時觸發; mouseenter:鼠標進入時觸發; mouseleave:鼠標移出時觸發; mousemove:鼠標在DOM內部移動時觸發; hover:鼠標進入和退出時觸發兩個函數,相當於mouseenter加上mouseleave。

鍵盤事件

鍵盤事件僅作用在當前焦點的DOM上,通常是<input>和<textarea>。
keydown:鍵盤按下時觸發; keyup:鍵盤松開時觸發; keypress:按一次鍵後觸發。

其他事件

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

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

因為JavaScript在此執行的時候,<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>

這樣寫就沒有問題了。因為相關代碼會在DOM樹初始化後再執行。
由於ready事件使用非常普遍,所以可以這樣簡化:

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

甚至還可以再簡化為:

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

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

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

事件參數

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

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

取消綁定

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

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!');
});

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

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

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

事件觸發條件

一個需要注意的問題是,事件的觸發總是由用戶操作引發的。例如,我們監控文本框的內容改動:

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

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

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

有些時候,我們希望用代碼觸發change事件,可以直接調用無參數的change()方法來觸發該事件:

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

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

為什麼我們希望手動觸發一個事件呢?如果不這麼做,很多時候,我們就得寫兩份一模一樣的代碼。

浏覽器安全限制

在浏覽器中,有些JavaScript代碼只有在用戶觸發下才能執行,例如,window.open()函數:

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

這些“敏感代碼”只能由用戶操作來觸發:

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

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

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

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

當用戶點擊button1時,click事件被觸發,由於popupTestWindow()在click事件處理函數內執行,這是浏覽器允許的,而button2的click事件並未立刻執行popupTestWindow(),延遲執行的popupTestWindow()將被浏覽器攔截。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved