Méthodes d'événements 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("Maintenant que le DOM est chargé, vous pouvez l'exploiter.");
});

click()

jQuery click()La méthode attache un gestionnaire de fonction aux éléments sélectionnés.

Lorsque l'utilisateur clique sur l'élément, la fonction suivante est exécutée :

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

mouseenter()

jQuery mouseenter()La méthode attache un gestionnaire de fonction aux éléments sélectionnés.

Lorsque le curseur de la souris entre dans l'élément, la fonction suivante est exécutée :

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

mouseleave()

jQuery mouseleave()La méthode attache un gestionnaire de fonction aux éléments sélectionnés.

Lorsque le curseur de la souris quitte l'élément, la fonction suivante est exécutée :

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

mousedown()

jQuery mousedown()La méthode attache un gestionnaire de fonction aux éléments sélectionnés.

Lorsque l'utilisateur appuie sur le bouton de la souris sur l'élément, la fonction suivante est exécutée :

$("p").mousedown(function(){
　　$(this).after("<p　style='color:red;'>Appuyer sur le bouton de la souris</p>");
});

mouseup()

jQuery mouseup()La méthode attache un gestionnaire de fonction aux éléments sélectionnés.

Lorsque le curseur de la souris est laissé enfoncé sur cet élément, la fonction suivante est exécutée :

$("p").mouseup(function(){
　　$(this).after("<p　style='color:green;'>Lâcher le bouton de la souris</p>");
});

keydown()

jQuery keydown()La méthode attache un gestionnaire de fonction aux éléments sélectionnés.

Lorsque l'utilisateur appuie sur une touche sur le clavier, la fonction suivante est exécutée :

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

keyup()

jQuery keyup()La méthode attache un gestionnaire de fonction aux éléments sélectionnés.

Lorsque l'utilisateur libère une touche sur le clavier, la fonction suivante est exécutée :

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

hover（）

jQuery hover()Les méthodes ont deux fonctions et sontmouseenter()etmouseleave()La combinaison des méthodes.

L'exemple suivant change la couleur de fond de tous<p>La couleur de fond de l'élément :

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

La méthode on()

jQuery fournitméthodeUne méthode pour répondre à tout événement sur l'élément sélectionné.

UtilisationméthodeNous pouvons attacher un ou plusieurs gestionnaires d'événements à l'élément sélectionné.

L'exemple suivant ajoute l'événement click à tous<p>Élément :

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

L'exemple suivant ajoute l'événement mouseenter à tous<p>Élément :

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

L'exemple suivant ajoute plusieurs gestionnaires d'événements à<div>Élément :

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

La méthode off()

jQuery off() 　méthode supprimeméthodedans une méthode avec un ou plusieurs gestionnaires d'événements attachés.

L'exemple suivant extrait<div>Supprimer l'événement mousemove dans l'élément :

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

Objet d'événement

Le système d'événements de jQuery est basé sur W3Standardisé par C pour l'objet d'événement.

Assurez-vous de passer l'objet d'événement au gestionnaire d'événement.

Chaque fonction de gestionnaire d'événement reçoit un objet d'événement contenant de nombreuses propriétés et méthodes.

$("div").on("click", function(event){
　　alert("Type d'événement est "　+　event.type);
　　alert("Cible : "　+　event.target.innerHTML);
});

Le tableau suivant montre toutes les méthodes et propriétés des objets d'événement :

Référence des événements jQuery

Pour une référence complète des événements, veuillez visiter notreManuel de référence jQuery Events.