什么是事件

事件通常由用戶與網頁的交互觸發，例如單擊鏈接或按鈕時，將文本輸入到輸入框或文本區域，在選擇框中進行選擇，按下鍵盤上的鍵，鼠標指針移動等。在某些情況下，瀏覽器本身可以觸發事件，例如頁面加載和卸載事件。

jQuery的通過為大多數原生瀏覽器事件的事件的方法提高了基本的事件處理機制，其中的一些方法是ready()，click()，keypress()，focus()，blur()，change()，等。例如，當DOM就緒執行一些JavaScript代碼，你可以使用jQueryready()方法，像這樣：

<script>
$(document).ready(function(){
    // Code to be executed
    alert("Hello World!");
});
</script>

一般來說，事件可以分為四大類——鼠標事件、鍵盤事件、表單事件和文檔/窗口事件。以下部分將一一簡要概述所有這些事件以及相關的 jQuery 方法。

鼠標事件

當用戶單擊某個元素、移動鼠標??指針等時會觸發鼠標事件。這里有一些常用的 jQuery 方法來處理鼠標事件。

該click()方法

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>

jQueryclick()方法將事件處理函數附加到所選元素以進行“單擊”事件。當用戶單擊該元素時，會執行附加功能。以下示例將在<p>單擊時隱藏頁面上的元素。

該dblclick()方法

jQuerydblclick()方法為“dblclick”事件將事件處理函數附加到所選元素。當用戶雙擊該元素時，會執行附加的函數。以下示例將在<p>雙擊時隱藏元素。

<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>

該hover()方法

jQueryhover()方法將一個或兩個事件處理函數附加到所選元素，當鼠標指針進入和離開元素時執行。第一個函數在用戶將鼠標指針放在元素上時執行，而第二個函數在用戶從該元素上移除鼠標指針時執行。

下面的示例將<p>在您將光標放在元素上時突出顯示元素，當您移除光標時，突出顯示將被取消。

<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>

該mouseenter()方法

jQuerymouseenter()方法將一個事件處理函數附加到選定的元素，當鼠標進入一個元素時執行該函數。下面的示例將<p>在您將光標放在元素上時向元素添加類高亮顯示。

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
});
</script>

該mouseleave()方法

jQuerymouseleave()方法將事件處理函數附加到選定元素，當鼠標離開元素時執行該函數。<p>當您從元素中移除光標時，以下示例將從元素中移除類高亮顯示。

<script>
$(document).ready(function(){
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>

鍵盤事件

當用戶按下或釋放鍵盤上的鍵時會觸發鍵盤事件。下面是一些常用的 jQuery 方法來處理鍵盤事件。

該keypress()方法

jQuerykeypress()方法將事件處理函數附加到選定元素(通常是表單控件)，當瀏覽器從用戶接收鍵盤輸入時執行該函數。下面的示例將在 kypress 事件被觸發時顯示一條消息，以及當您按下鍵盤上的鍵時它被觸發的次數。

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

該keydown()方法

jQuerykeydown()方法將一個事件處理函數附加到選定的元素(通常是表單控件)，當用戶第一次按下鍵盤上的某個鍵時會執行該函數。下面的示例將在觸發 keydown 事件時顯示一條消息，以及按下鍵盤上的鍵時觸發的次數。

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keydown(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

該keyup()方法

jQuerykeyup()方法將事件處理函數附加到選定元素(通常是表單控件)，當用戶釋放鍵盤上的鍵時執行該函數。下面的示例將在觸發 keyup 事件時顯示一條消息，以及按下并釋放鍵盤上的某個鍵時觸發的次數。

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

表單事件

當表單控件接收或失去焦點或用戶修改表單控件值時觸發表單事件，例如通過在文本輸入中鍵入文本、在選擇框中選擇任何選項等。以下是一些常用的 jQuery 方法處理表單事件。

該change()方法

jQuerychange()方法將一個事件處理函數附加到<input>,<textarea>和<select>在其值更改時執行的元素。當您在下拉選擇框中選擇任何選項時，以下示例將顯示一條警報消息。

<script>
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("You have selected - " + selectedOption);
    });
});
</script>

該focus()方法

jQueryfocus()方法將一個事件處理函數附加到選定的元素(通常是表單控件和鏈接)，并在它獲得焦點時執行。以下示例將在文本輸入獲得焦點時顯示一條消息。

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>

該blur()方法

jQueryblur()方法將一個事件處理函數附加到表單元素，例如<input>, <textarea>，<select>當它失去焦點時執行。以下示例將在文本輸入失去焦點時顯示一條消息。

<script>
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>

該submit()方法

jQuerysubmit()方法將事件處理函數附加到<form>用戶嘗試提交表單時執行的元素。以下示例將根據您嘗試提交表單時輸入的值顯示一條消息。

<script>
$(document).ready(function(){
    $("form").submit(function(event){
        var regex = /^[a-zA-Z]+$/;
        var currentValue = $("#firstName").val();
        if(regex.test(currentValue) == false){
            $("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
            // Preventing form submission
            event.preventDefault();
        }
    });
});
</script>

文檔/窗口事件

事件也會在頁面 DOM(文檔對象模型)準備好或用戶調整瀏覽器窗口大小或滾動等情況下觸發。這里有一些常用的 jQuery 方法來處理此類事件。

該ready()方法

jQueryready()方法指定在 DOM 完全加載時要執行的函數。

一旦 DOM 層次結構完全構建并準備好進行操作，以下示例將替換段落文本。

<script>
$(document).ready(function(){
    $("p").text("The DOM is now loaded and can be manipulated.");
});
</script>

該resize()方法

jQueryresize()方法將事件處理函數附加到當瀏覽器窗口的大小改變時執行的窗口元素。

以下示例將在您嘗試通過拖動角調整瀏覽器窗口的大小時顯示瀏覽器窗口的當前寬度和高度。

<script>
$(document).ready(function(){
    $(window).resize(function() {
        $(window).bind("resize", function(){ 
            $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
        });
    });
});
</script>

該scroll()方法

jQueryscroll()方法將事件處理函數附加到窗口或可滾動的 iframe 和元素，只要元素的滾動位置發生變化，就會執行該函數。

以下示例將在您滾動瀏覽器窗口時顯示一條消息。

<script>
$(document).ready(function(){
    $(window).scroll(function() {
        $("p").show().fadeOut("slow");
    });
});
</script>

以上就是動力節點小編介紹的"jQuery事件詳解"，希望對大家有幫助，想了解更多可查看 jQuery教程。動力節點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。