Руководство jQuery

Опубликовано admin - вт, 05/01/2018 - 23:40

[Функция] 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>

Пример:

Добевление текста в параграф, при нажатии по нему:

"jQuery"

$("body").delegate("p", "click", function(){
  alert( $(this).text() );
});

Пример:

Предотвращение всплытие и действия браузера по умолчанию:

"jQuery"

$("body").delegate("a", "click", function() { return false; })

Пример:

Для отмены выполнения текущего действия браузера используется метод "preventDefault", в нашм примере переход по ссылке не произойдёт:

"jQuery"

$("body").delegate("a", "click", function(event){
  event.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 (http://api.jquery.com/delegate/)

Версия jQuery 1.4.2 Документ создан 2010-08-21

Руководство по jQuery!

Плагины jQuery UI

Эффекты