Explication détaillée de la façon d'utiliser le délégué d'événement jquery()_jquery

Regardons d'abord ce que dit le responsable à propos de la méthode délégué(). La méthode délégué() ajoute un ou plusieurs gestionnaires d'événements à l'élément spécifié (un élément enfant de l'élément sélectionné) et stipule qu'il sera exécuté lorsque ces événements se produisent. Fonctions, les gestionnaires d'événements utilisant la méthode délégué() s'appliquent aux éléments actuels ou futurs (tels que les nouveaux éléments créés par un script).
La syntaxeest très simple

$(selector).delegate(childSelector,event,data,function)

Description du paramètre

• childSelector requis. Spécifie un ou plusieurs éléments enfants auxquels les gestionnaires d'événements sont attachés.
• événement Obligatoire. Spécifie un ou plusieurs événements à attacher à l'élément.
• Plusieurs valeurs d'événement séparées par des espaces. Doit être un événement valide.
• données Facultatif. Spécifie des données supplémentaires à transmettre à la fonction.
• fonction requise. Spécifie une fonction à exécuter lorsqu'un événement se produit.

La fonction de délégué est appelée par un élément parent commun d'un certain type.

listNode.delegate('.condition-remove','click',function(e){
e.preventDefault();
$(this).parents('.search-condition-item').remove();
});

Exemple complet (effet à obtenir)

function renderSearchConditions(selectionId,conditions){var conditionsTemplate = '<div class="search-conditions-list-section">'+
'<ul class="search-conditions-list"></ul>'+
'</div>',
listNode = $(conditionsTemplate);
listItemTemplate = '<li class="search-condition-item" data-type="{conditonType}"><span>{condition}</span><a class="condition-remove" href="#">x</a></li>';
for(var key in conditions)
{
var condition = conditions[key].keyword,
conditionType = conditions[key].type,
listItemNode = $.substitute(listItemTemplate,{conditionType:conditionType,condition:condition});
listNode.append(listItemNode);
}
$(selectionId).prepend(listNode);
listNode.delegate('.condition-remove','click',function(e){
e.preventDefault();
$(this).parents('.search-condition-item').remove();

});
}

1. Dans la transaction liée, obtenez la source de la transaction, appelez la méthode hide et transmettez l'objet source de la transaction :

$(document).delegate("body"， "click"， function(e) {
  var ev = e || window.event; // 事务
  //var target = ev.target || ev.srcElement; // 获得事务源
  hide(ev.target || ev.srcElement， true);
 });

$(window) était utilisé à l'origine, mais avant IE8, il semblait y avoir un bug.
L'inconvénient de $(document) est qu'il sera déclenché une fois après le chargement de la page...
2. Dans la méthode hide, déterminez si la source de transaction est émise à partir de l'élément spécifié, c'est-à-dire si l'élément source de transaction est un élément enfant de l'élément spécifié ou lui-même.

//子元素断定====
 if (!!window.find)HTMLElement.prototype.contains = function(B) {
  return this.compareDocumentPosition(B) - 19 > 0
 };
 function hide(dom， isClick) {
  var nn，t，_isClick = !!isClick;
  try {
   for (var n in objList) {
    nn = objList[n];
    t = nn.getOption("target")[0];
    if (_isClick && (t == dom || t.contains(dom)))return;
    if (!_isClick || !nn.box[0].contains(dom)) nn.hide();
   }
  } catch(e) {
  }
 }

3. Dans la méthode hide ci-dessus, la variable isClick détermine si l'événement de clic est déclenché. Afin de gérer le redimensionnement. Resize utilise settimeout pour le traitement afin de réduire la consommation de mémoire.

var reTime = null;
 $(window).bind("resize"， function() {
  if (reTime) clearTimeout(reTime);
  reTime = setTimeout(hide， 50);
 });

Ce qui précède concerne l'utilisation de jquery event délégué(). J'espère que cela sera utile à l'apprentissage de chacun.