Ausführliche Erklärung zur Verwendung des jquery-Ereignisdelegate()_jquery

Sehen wir uns zunächst an, was der Beamte über die Methode „delegate()“ sagt. Die Methode „delegate()“ fügt dem angegebenen Element (einem untergeordneten Element des ausgewählten Elements) einen oder mehrere Ereignishandler hinzu und legt fest, dass sie wann ausgeführt wird Diese Ereignisse treten auf. Funktionen und Ereignishandler, die die Methode „delegate()“ verwenden, gelten für aktuelle oder zukünftige Elemente (z. B. neue Elemente, die von einem Skript erstellt wurden).
Die Syntaxist sehr einfach

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

Parameterbeschreibung

• childSelector Erforderlich. Gibt ein oder mehrere untergeordnete Elemente an, an die Ereignishandler angehängt werden.
• Ereignis Erforderlich. Gibt ein oder mehrere Ereignisse an, die dem Element zugeordnet werden sollen.
• Mehrere Ereigniswerte durch Leerzeichen getrennt. Muss ein gültiges Ereignis sein.
• Daten Optional. Gibt zusätzliche Daten an, die an die Funktion übergeben werden sollen.
• Funktion erforderlich. Gibt eine Funktion an, die ausgeführt werden soll, wenn ein Ereignis auftritt.

Die Funktion des Delegaten wird von einem gemeinsamen übergeordneten Element eines bestimmten Typs aufgerufen.

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

Vollständiges Beispiel (zu erzielender Effekt)

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. Rufen Sie in der gebundenen Transaktion die Transaktionsquelle ab, rufen Sie die Methode hide auf und übergeben Sie das Transaktionsquellenobjekt:

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

$(window) wurde ursprünglich verwendet, aber vor IE8 schien es einen Fehler zu haben.
Der Nachteil von $(document) besteht darin, dass es einmal ausgelöst wird, nachdem die Seite geladen wurde...
2. Bestimmen Sie in der Methode hide, ob die Transaktionsquelle vom angegebenen Element ausgegeben wird, dh ob das Transaktionsquellenelement ein untergeordnetes Element des angegebenen Elements oder sich selbst ist.

//子元素断定====
 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. In der Hide-Methode oben bestimmt die Variable isClick, ob das Klickereignis ausgelöst wird. Um die Größenänderung zu handhaben. Resize verwendet settimeout für die Verarbeitung, um den Speicherverbrauch zu reduzieren.

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

Oben geht es um die Verwendung von jQuery Event Delegate(). Ich hoffe, dass es für das Lernen aller hilfreich sein wird.