Heim > Web-Frontend > js-Tutorial > Ausführliche Erklärung zur Verwendung des jquery-Ereignisdelegate()_jquery

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

WBOY
Freigeben: 2016-05-16 15:18:14
Original
1314 Leute haben es durchsucht

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)
Nach dem Login kopieren

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();
});
Nach dem Login kopieren

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();

});
}
Nach dem Login kopieren

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);
 });
Nach dem Login kopieren

$(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) {
  }
 }
Nach dem Login kopieren

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);
 });
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage