Penjelasan terperinci tentang contoh fungsi pendengaran mengikat JavaScript untuk kemahiran handles_javascript acara

Contoh dalam artikel ini menerangkan cara JavaScript mengikat fungsi pendengaran kepada pengendali acara. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Mengikat fungsi mendengar acara kepada elemen Dom dalam JavaScript adalah perkara yang sangat biasa, tetapi terdapat juga banyak pepijat di sini. Pelbagai pelayar menyediakan banyak kaedah untuk mengikat acara, tetapi hanya 3 yang boleh dipercayai:

1. Kaedah pengikatan tradisional:

elem.onclick = function( event ){
  alert(event.type + 'this.innerHTML');
};

a. Kaedah pengikatan tradisional adalah sangat mudah dan stabil Ini dalam badan fungsi juga menunjuk ke nod yang sedang memproses acara (seperti nod yang sedang menjalankan pengendali acara).

b. Pengendali acara bagi sesuatu elemen hanya boleh mendaftarkan satu fungsi Jika didaftarkan berulang kali, penggantian akan berlaku lebih-lebih lagi, kaedah pengikatan tradisional hanya akan dijalankan dalam acara menggelegak.

2. Kaedah pengikatan standard W3C:

var elem = document.getElementById('ID');
elem.addEventListener('click' ,
  function( event ){ 
   alert(event.type + ' ' + this.innerHTML + 1); 
  } , 
  false //冒泡阶段执行
);
elem.addEventListener('click' ,
  function( event ){ 
   alert(event.type + ' ' + this.innerHTML + 2); 
  } ,
  false
);

a. Kaedah pengikatan ini menyokong kedua-dua peringkat tangkapan dan pemproses masa berbilang fungsi pendengaran boleh didaftarkan untuk pengendali acara yang sama bagi elemen yang sama dan, di dalam fungsi mendengar, ini menunjuk kepada elemen semasa.

b. Walau bagaimanapun, pelayar IE yang popular tidak menyokong kaedah pendaftaran ini.

3. Kaedah pendaftaran pengendali acara IE:

var elem = document.getElementById('a');
elem.attachEvent('onclick' ,
  function(){ 
   alert(window.event.srcElement.innerHTML + ' ' + this.innerHTML + 1); 
  } 
);
elem.attachEvent('onclick' ,
  function(){ 
   alert(window.event.srcElement.innerHTML + ' ' + this.innerHTML + 2); 
  }
);

a. Kaedah mengikat ini boleh mendaftarkan pemegang acara yang sama beberapa kali.

b. Model acara IE tidak menyokong penangkapan peristiwa; ini dalam badan fungsi mendengar tidak menghala ke elemen semasa, dan window.event.srcElement menghala ke nod tempat peristiwa berlaku, bukan nod semasa dan dalam Peristiwa IE Tiada sifat DOM currentTarget yang setara dalam objek.

4. Kaedah silang pelayar satu:

function addEvent(element, type, handler) {
  if (!handler.$$guid) handler.$$guid = addEvent.guid++;
  if (!element.events) element.events = {};
  var handlers = element.events[type];
  if (!handlers) {
  handlers = element.events[type] = {};
  if (element["on" + type]) {
   handlers[0] = element["on" + type];
  }
  }
  handlers[handler.$$guid] = handler;
  element["on" + type] = handleEvent;
};
addEvent.guid = 1;
function removeEvent(element, type, handler) {
  if (element.events && element.events[type]) {
  delete element.events[type][handler.$$guid];
  }
};
function handleEvent(event) {
  var returnValue = true;
  event = event || fixEvent(window.event);
  var handlers = this.events[event.type];
  for (var i in handlers) {
  this.$$handleEvent = handlers[i];
  if (this.$$handleEvent(event) === false) {
   returnValue = false;
  }
  }
  return returnValue;
};
function fixEvent(event) {
  event.preventDefault = fixEvent.preventDefault;
  event.stopPropagation = fixEvent.stopPropagation;
  return event;
};
fixEvent.preventDefault = function() {
  this.returnValue = false;
};
fixEvent.stopPropagation = function() {
  this.cancelBubble = true;
};

5. Kaedah silang pelayar dua:

function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
  obj['e'+type+fn] = fn;
  obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
  obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
  obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
  obj.detachEvent( 'on'+type, obj[type+fn] );
  obj[type+fn] = null;
  } else
  obj.removeEventListener( type, fn, false );
}

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.