Категории: События jQuery > Управление событиями
Описание: Прикрепляет обработчик одного или нескольких событий для всех элементов, которые соответствуют выбору, в настоящее время или в будущем, на основе определенного набора корневых элементов.
.delegate( селектор, типСобытия, обработчик )
Добавлена в версию: 1.4.2
селектор
Селектор для фильтрации элементов, которые вызывают событие.
типСобытия
Строка, содержащая один или более разделенных пробелами типов событий JavaScript, таких как "click" или "keydown," или пользовательские имена событий.
обработчик
Функции для выполнения во время запуска события.
.delegate( селектор, типСобытия, данныеСобытия, обработчик )
Добавлена в версию: 1.4.2
селектор
Селектор для фильтрации элементов, которые вызывают событие.
типСобытия
Строка, содержащая один или более разделенных запятыми типов событий JavaScript, таких как "click" или "keydown," или пользовательские имена событий.
данныеСобытия
Карта данных, которая будет переданна в обработчик события.
обработчик
Функция для выполнения во время запуска события.
Делегирование является альтернативой использованию метода .live(), позволяет для каждого связанного события делегирование конкретных элементов DOM. Например, следующий код делегирования:
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
Эквивалентен следующему коду, написанному с использованием .live():
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
Смотрите также метод .undelegate() для способа удаления обработчика события, добавленного в .delegate().
Примеры
Пример 1
Нажмите на параграф, чтобы добавить другой. Обратите внимание .delegate() привязывает событие нажатия на все параграфы - и даже на новые.$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
Пример 1 - Полный код:
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
});
</script>
</head>
<body>
<p>Click me!</p>
<span></span>
</body>
</html>
Пример 2
Для отображения текста каждого параграфа в окне предупреждения всякий раз, когда он нажат:
$("body").delegate("p", "click", function(){
alert( $(this).text() );
});
Пример 3
Чтобы отменить действие по умолчанию и не допустить его распространение, верните false:
$("body").delegate("a", "click", function() { return false; })
Пример 4
Чтобы отменить только действие по умолчанию с помощью метода preventDefault.
$("body").delegate("a", "click", function(event){
event.preventDefault();
});
Пример 5
Также можно связать пользовательские события.Пример 5 - Полный код:
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
span { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("body").delegate("p", "myCustomEvent", function(e, myName, myValue){
$(this).text("Hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent");
});
});
</script>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
</body>
</html>
Была ли эта информация полезной?
