Методы событий 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()

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

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

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

click()

метод click()Метод добавляет функцию обработчика событий к выбранному элементу.

Когда пользователь单击 этот элемент, выполняется эта функция:

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

mouseenter()

метод mouseenter()Метод добавляет функцию обработчика событий к выбранному элементу.

Когда указатель мыши входит в этот элемент, выполняется эта функция:

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

mouseleave()

метод mouseleave()Метод добавляет функцию обработчика событий к выбранному элементу.

Когда указатель мыши покидает этот элемент, выполняется эта функция:

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

mousedown()

метод mousedown()Метод добавляет функцию обработчика событий к выбранному элементу.

Когда пользователь нажимает кнопку мыши на этом элементе, выполняется эта функция:

$("p").mousedown(function(){
　　$(this).after("<p style='color:red;'>Нажата鼠标 клавиша</p>");
});

mouseup()

метод mouseup()Метод добавляет функцию обработчика событий к выбранному элементу.

Когда пользователь отпускает кнопку мыши на этом элементе, выполняется эта функция:

$("p").mouseup(function(){
　　$(this).after("<p style='color:green;'>Отпущен鼠标 клавиша</p>");
});

keydown()

метод keydown()Метод добавляет функцию обработчика событий к выбранному элементу.

Когда пользователь нажимает клавишу на клавиатуре, выполняется эта функция:

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

keyup()

метод keyup()Метод добавляет функцию обработчика событий к выбранному элементу.

Когда пользователь отпускает клавишу на клавиатуре, выполняется эта функция:

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

hover（）

метод hover()методы имеют два функции и являютсяmouseenter()иmouseleave()комбинированных методов при наведении мыши.

Пример, приведенный ниже, изменяет цвет фона всех<p>Цвет фона элемента:

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

метод on()

jQuery предоставляетметододного из методов для ответа на любое событие, которое может произойти с выбранным элементом.

Использованиеметодметодам, и мы можем добавить один или несколько обработчиков событий к выбранному элементу.

Пример, приведенный ниже, добавляет событие click ко всем<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 　метод удаляетметодметод содержит один или несколько обработчиков событий.

в данном примере из<div>удалить с элемента собыитие mousemove:

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

объект события

система событий jQuery стандартизирует объекты событий по стандартам W3C.

Убедитесь, что объект события передается обработчику события.

каждый обработчик событий получает объект события, который содержит множество свойств и методов.

$("div").on("click", function(event){
　　alert("тип события: " + event.type);
　　alert("Target: " + event.target.innerHTML);
});

в таблице ниже приведены все методы и свойства объектов событий:

Вернуть клавишу или кнопку мыши, на которую было нажато событие

Руководство по событиям jQueryДля полной информации о событиях посетите нашРуководство по jQuery Events