Rumah > hujung hadapan web > tutorial js > Penjelasan terperinci tentang cara menggunakan jquery event delegate()_jquery

Penjelasan terperinci tentang cara menggunakan jquery event delegate()_jquery

WBOY
Lepaskan: 2016-05-16 15:18:14
asal
1317 orang telah melayarinya

Mari kita lihat dahulu apa yang dikatakan oleh pegawai tentang kaedah delegate() Kaedah delegate() menambah satu atau lebih pengendali acara pada elemen yang ditentukan (elemen anak bagi elemen yang dipilih) dan menetapkan bahawa ia akan dijalankan apabila. peristiwa ini berlaku. Fungsi, pengendali acara menggunakan kaedah delegate() digunakan pada elemen semasa atau akan datang (seperti elemen baharu yang dicipta oleh skrip).
Sintakssangat mudah

$(selector).delegate(childSelector,event,data,function)
Salin selepas log masuk

Penerangan Parameter

  • childSelector Diperlukan. Menentukan satu atau lebih elemen anak yang mana pengendali acara dilampirkan.
  • acara Diperlukan. Menentukan satu atau lebih acara untuk dilampirkan pada elemen.
  • Berbilang nilai acara dipisahkan oleh ruang. Mesti acara yang sah.
  • data Pilihan. Menentukan data tambahan untuk dihantar ke fungsi.
  • fungsi diperlukan. Menentukan fungsi untuk dijalankan apabila peristiwa berlaku.

Fungsi perwakilan dipanggil oleh unsur induk biasa bagi jenis tertentu.

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

Contoh lengkap (kesan yang perlu dicapai)

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

});
}
Salin selepas log masuk

1 Dalam urus niaga terikat, dapatkan sumber urus niaga, panggil kaedah sembunyikan, dan masukkan objek sumber urus niaga:

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

$(window) pada asalnya digunakan, tetapi sebelum IE8, ia kelihatan mempunyai pepijat.
Kelemahan $(dokumen) ialah ia akan dicetuskan sekali selepas halaman dimuatkan...
2. Dalam kaedah sembunyikan, tentukan sama ada sumber urus niaga dipancarkan daripada elemen yang ditentukan, iaitu sama ada elemen sumber urus niaga ialah elemen anak bagi elemen yang ditentukan atau dirinya sendiri.

//子元素断定====
 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) {
  }
 }
Salin selepas log masuk

3 Dalam kaedah sembunyikan di atas, pembolehubah isClick menentukan sama ada peristiwa klik dicetuskan. Untuk mengendalikan saiz semula. Ubah saiz menggunakan settimeout untuk pemprosesan untuk mengurangkan penggunaan memori.

var reTime = null;
 $(window).bind("resize", function() {
  if (reTime) clearTimeout(reTime);
  reTime = setTimeout(hide, 50);
 });
Salin selepas log masuk

Di atas adalah mengenai penggunaan jquery event delegate().

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan