[Функция] delegate()
Раздел "Events"
Метод позволяет прикрепить функцию обработчик к одному или нескольким событиям, для всех элементов, соответствующих определённому селектору, указанному в первом параметре метода. При этом поиск начинается в контексте корневого элемента. Метод реализутеся как для сущетсвующих, так и для будущих элементов.
Параметры
delegate(selector,eventType,handler)
1.4.2
selector:
элемент на котором при срабатывании события, запускается данный метод
eventType:
тип события, например "click" или "keydown, которое будет перехвачено данным методом"
handler:
функция обработчик
function (eventObject) {
this; // элемент
}
delegate(selector,eventType,eventData,handler )
1.4.2
selector:
элемент на котором при срабатывании события, запускается данный метод
eventType:
тип события, например "click" или "keydown, которое будет перехвачено данным методом"
eventData:
дополнительный массив, передаваемый в качестве параметра функции обработчику метода delegate
handler:
функция обработчик метода delegate
function (eventObject) {
this; // элемент
}
Описание
Двнный метод является альтернативой методу live(), привязывающий событие к определенному элементу, примеры идентичные друг другу:
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
Для удаления обработчика события, добавленного данным методом используется метод undelegate().
Так как при методе live() происходит всплытие события до корневого элемента, поэтому его не возможно остановить. В противоположность методу live, события будет сработает на элементе указнном в методе delegate, события других элементов не сработают при этом. Смотрите первый пример в котром эта разница объясняется наглядно.
Примеры
Пример:
Пример разъясняющий различия методов live и delegate, изменив с deleagte на live всплытие собтия не будет предотвращено, а с delegate данная особенность устранена:
"jQuery"
$("table").delegate('td', "click", function(e){ $(this).toggle('slow'); }); //$('div').live('click', function(e){ $('div').delegate('div','click', function(e){ e.stopPropagation(); alert(1) });
"HTML"
<table> <tr><td><div></div> <tr><td> </table>
"CSS"
table td{
height:200px;
width:200px;
background:red;
}
table td div{
height:150px;
width:150px;
background:green;
}
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("table").delegate('td', "click", function(e){ $(this).toggle('slow'); }); //$('div').live('click', function(e){ $('div').delegate('div','click', function(e){ e.stopPropagation(); alert(1) }); }); </script> </head> <body class="iframe"> <table> <tr><td><div></div> <tr><td> </table> </body> </html> <style> table td{ height:200px; width:200px; background:red; } table td div{ height:150px; width:150px; background:green; } </style>
Пример:
Отображение текста каждого параграфа в диалоговом окне один раз по событию onclick:
"jQuery"
$("body").delegate("p", "click", function(){
$(this).after("<p>Дополнительный параграфh!</p>");
});
"HTML"
<p>Click me!</p>
"CSS"
p {
background:yellow;
font-weight:bold; cursor:pointer;
padding:5px;
}
p.over { background: #ccc; }
span { color:red; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("body").delegate("p", "click", function(){ $(this).after("<p>Дополнительный параграфh!</p>"); }); }); </script> </head> <body class="iframe"> <p>Click me!</p> </body> </html> <style> p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; } p.over { background: #ccc; } span { color:red; } </style>
Пример:
Добавление параграфов при нажатии как по существующему, так и по новому параграфу
"jQuery"
$("body").delegate("p", "click", function(){
$(this).after("<p>Дополнительный параграф!</p>");
});
"HTML"
<p>Нажми!</p>
"CSS"
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("body").delegate("p", "click", function(){ $(this).after("<p>Дополнительный параграф!</p>"); }); }); </script> </head> <body class="iframe"> <p>Нажми!</p> </body> </html> <style> p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; } p.over { background: #ccc; } span { color:red; } </style>
Пример:
Добевление текста в параграф, при нажатии по нему:
Пример:
Предотвращение всплытие и действия браузера по умолчанию:
Пример:
Для отмены выполнения текущего действия браузера используется метод "preventDefault", в нашм примере переход по ссылке не произойдёт:
Пример:
Добавлять пользовательское событие так же допускается, в этом случае пользовательским событием является "myCustomEvent":
"jQuery"
$("body").delegate("p", "myCustomEvent", function(e, myName, myValue){ $(this).text("Привет!"); $("span").stop().css("opacity", 1) .text("myName = " + myName) .fadeIn(30).fadeOut(1000); }); $("button").click(function () { $("p").trigger("myCustomEvent"); });
"HTML"
<p>Создаём пользовательское событие</p> <button>Запустить пользовательское событие</button> <span style="display:none;"></span>
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("body").delegate("p", "myCustomEvent", function(e, myName, myValue){ $(this).text("Привет!"); $("span").stop().css("opacity", 1) .text("myName = " + myName) .fadeIn(30).fadeOut(1000); }); $("button").click(function () { $("p").trigger("myCustomEvent"); }); }); </script> </head> <body class="iframe"> <p>Создаём пользовательское событие</p> <button>Запустить пользовательское событие</button> <span style="display:none;"></span> </body> </html>
Версия jQuery 1.4.2
Документ создан 2010-08-21