jQuery Ereignismethoden

事件是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()Fügt den Ereignisbehandlingsfunktion auf den ausgewählten Element hinzu.

Wenn der Benutzer auf das Element klickt, wird diese Funktion ausgeführt:

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

mouseenter()

jQuery mouseenter()Fügt den Ereignisbehandlingsfunktion auf den ausgewählten Element hinzu.

Wenn der Mauszeiger in das Element eintritt, wird diese Funktion ausgeführt:

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

mouseleave()

jQuery mouseleave()Fügt den Ereignisbehandlingsfunktion auf den ausgewählten Element hinzu.

Wenn der Mauszeiger den Element verlässt, wird diese Funktion ausgeführt:

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

mousedown()

jQuery mousedown()Fügt den Ereignisbehandlingsfunktion auf den ausgewählten Element hinzu.

Wenn der Benutzer die Maustaste auf dem Element drückt, wird diese Funktion ausgeführt:

$("p").mousedown(function(){
　　$(this).after("<p style='color:red;'>Drücken Sie die Maustaste</p>");
});

mouseup()

jQuery mouseup()Fügt den Ereignisbehandlingsfunktion auf den ausgewählten Element hinzu.

Wenn Sie die Maustaste auf dem Element loslassen, wird diese Funktion ausgeführt:

$("p").mouseup(function(){
　　$(this).after("<p style='color:green;'>Lösen Sie die Maustaste</p>");
});

keydown()

jQuery keydown()Fügt den Ereignisbehandlingsfunktion auf den ausgewählten Element hinzu.

Wenn der Benutzer eine Taste auf der Tastatur drückt, wird diese Funktion ausgeführt:

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

keyup()

jQuery keyup()Fügt den Ereignisbehandlingsfunktion auf den ausgewählten Element hinzu.

Wenn der Benutzer eine Taste auf der Tastatur löst, wird diese Funktion ausgeführt:

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

hover（）

jQuery hover()Methoden haben zwei Funktionen und sindmouseenter()undmouseleave()Kombination der Methoden.

Der folgende Beispiel ändert die Farbe, wenn der Mauszeiger über der Oberfläche hängt.<p>Die Hintergrundfarbe des Elements:

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

on() Methode

jQuery bieteton()Eine Methode, um auf jedes Ereignis auf dem ausgewählten Element zu reagieren.

Verwendenon()Methoden hinzu, wir können einen oder mehrere Ereignisbehandler für den ausgewählten Element hinzufügen.

Der folgende Beispiel fügt den click-Ereignis auf alle<p>元素：

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

下面的示例将mouseenter事件附加到所有<p>元素：

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

以下示例将多个事件处理程序附加到<div>元素：

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

off()方法

jQuery off() 　方法删除该on()方法附带的一个或多个事件处理程序。

下面的示例从<div>元素中删除mousemove事件：

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

事件对象

jQuery的事件系统根据W3C标准标准化事件对象。

确保将事件对象传递给事件处理程序。

每个事件处理函数都会接收一个事件对象，其中包含许多属性和方法。

$("div").on("click",　function(event){
　　alert("Event　type　is　"　+　event.type);
　　alert("Target　:　"　+　event.target.innerHTML);
});

下表显示了所有事件对象的方法和属性：

jQuery Ereignisreferenz

Für eine vollständige Ereignisreferenz besuchen Sie bitte unserejQuery Ereignisse Referenzhandbuch.