Metodi di evento jQuery

事件是Web应用程序可以检测到的操作。

jQuery提供了将事件处理程序附加到选择的简单方法。

发生事件时，将执行提供的函数。

以下是示例事件：

• 网页加载

• 点击一个元素

• 将鼠标移到元素上

• 提交HTML表格

• 键盘上的按键等

事件方法的jQuery语法

在jQuery中，大多数DOM事件具有等效的jQuery方法。

要将点击事件分配给页面上的所有段落，请执行以下操作：

$("p").click();

下一步是定义事件发生时应发生的情况。您必须将一个函数传递给事件：

$("p").click(function(){
　　//　需要执行的动作...
　　});

此示例在单击页面时隐藏页面上的段落：

$("p").click(function(){
　　$(this).hide();
});

本示例将一个“changeSize”函数附加到click事件：

$(document).ready(function(){
　　$("p").click(changeSize);
});
function　changeSize()　{
　　$(this).animate({fontSize: "+=5px"});
}

常用的jQuery事件方法

$（document）.ready()

jQuery $(document).ready()方法指定在DOM完全加载时要执行的函数。

以下示例在加载DOM时显示一条消息：

$(document).ready(function(){
　　$("p").text("现在已经加载了DOM，可以对其进行操作.");
});

click()}}

jQuery click()}}Il metodo aggiunge una funzione gestore di eventi all'elemento selezionato.

Quando l'utente fa clic sull'elemento, viene eseguita questa funzione:

$("p").click(function(){
　　$(this).css({"background-color":"#007FFF",　"color":"white"});
});

mouseenter()

jQuery mouseenter()Il metodo aggiunge una funzione gestore di eventi all'elemento selezionato.

Quando il puntatore del mouse entra nell'elemento, viene eseguita questa funzione:

$("p").mouseenter(function(){
　　$(this).css("background-color",　"yellow");
});

mouseleave()

jQuery mouseleave()Il metodo aggiunge una funzione gestore di eventi all'elemento selezionato.

Quando il puntatore del mouse lascia l'elemento, viene eseguita questa funzione:

$("p").mouseleave(function(){
　　$(this).css("background-color",　"lightblue");
});

mousedown()

jQuery mousedown()Il metodo aggiunge una funzione gestore di eventi all'elemento selezionato.

Quando l'utente preme un pulsante del mouse sull'elemento, viene eseguita questa funzione:

$("p").mousedown(function(){
　　$(this).after("<p　style='color:red;'>Premere il pulsante del mouse</p>");
});

mouseup()

jQuery mouseup()Il metodo aggiunge una funzione gestore di eventi all'elemento selezionato.

Quando il pulsante del mouse viene rilasciato sull'elemento, viene eseguita questa funzione:

$("p").mouseup(function(){
　　$(this).after("<p　style='color:green;'>Rilasciare il pulsante del mouse</p>");
});

keydown()

jQuery keydown()Il metodo aggiunge una funzione gestore di eventi all'elemento selezionato.

Quando l'utente preme una chiave sulla tastiera, viene eseguita questa funzione:

$("input").keydown(function(event){
　　$(this).css("background-color",　"yellow");
　　$("span").text(event.type);
});

keyup()

jQuery keyup()Il metodo aggiunge una funzione gestore di eventi all'elemento selezionato.

Quando l'utente rilascia una chiave sulla tastiera, viene eseguita questa funzione:

$("input").keyup(function(event){
　　$(this).css("background-color",　"lightblue");
　　$("span").text(event.type);
});

hover（）

jQuery hover()Metodi hanno due funzioni e sonomouseenter()emouseleave()La combinazione dei metodi.

Esempio di cambio del colore di sfondo degli elementi quando il puntatore del mouse è sopra di essi.<p>Il colore di sfondo dell'elemento:

$("p").hover(function(){
　　$(this).css("background-color",　"yellow");
　　},　function(){
　　$(this).css("background-color",　"lightblue");
});

Il metodo on()

jQuery forniscemetodoUn metodo per rispondere a qualsiasi evento sull'elemento selezionato.

UtilizzandometodoMetodi, possiamo aggiungere un o più gestori di eventi all'elemento selezionato.

Esempio di aggiunta dell'evento click a tutti i<p>elemento:

$("p").on("click",　function(){
　　$("this").css("background-color", "coral");
});

Il seguente esempio aggiunge l'evento mouseenter a tutti<p>elemento:

$("p").on("mouseenter", function(){
　　$("this").css("background-color", "coral");
});

Il seguente esempio aggiunge più gestori di eventi a<div>elemento:

$("div").on("mouseenter mouseleave click", function(){
　　$("this").text(Math.random());
});

metodo off()

jQuery metodo 　metodo eliminametodoun metodo con uno o più gestori di eventi associati.

Il seguente esempio viene da<div>rimuovi l'evento mousemove dall'elemento:

$("button").click(function(){
　　$("div").off("mousemove");
});

oggetto evento

Il sistema di eventi jQuery standardizza gli oggetti evento secondo lo standard W3C.

Assicurati di passare l'oggetto evento al gestore degli eventi.

Ogni funzione di gestione degli eventi riceve un oggetto evento che contiene molte proprietà e metodi.

$("div").on("click", function(event){
　　alert("Il tipo di evento è: " + event.type);
　　alert("Obiettivo: " + event.target.innerHTML);
});

La seguente tabella elenca tutti i metodi e le proprietà degli oggetti evento:

Manuale di riferimento degli eventi jQuery

Per una参考 completa degli eventi, visitare il nostroManuale di riferimento degli eventi jQuery.