Penjelasan terperinci tentang kemahiran penggunaan pendengar acara js examples

Penjelasan terperinci tentang kemahiran penggunaan pendengar acara js examples_javascript

WBOY

Lepaskan： 2016-05-16 15:57:13

asal

1275 orang telah melayarinya

Contoh dalam artikel ini menerangkan penggunaan pendengar acara js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

1. Apabila objek yang sama menggunakan kaedah penulisan .onclick untuk mencetuskan berbilang kaedah, kaedah yang terakhir akan menimpa kaedah sebelumnya, maksudnya, apabila peristiwa onclick objek berlaku, hanya pengikatan terakhir yang akan dilaksanakan kaedah. Dengan mendengar acara, tidak akan ada penggantian dan setiap acara terikat akan dilaksanakan. Seperti berikut:

window.onload = function(){ 
  var btn = document.getElementById("yuanEvent"); 
  btn.onclick = function(){ 
    alert("第一个事件"); 
  } 
  btn.onclick = function(){ 
    alert("第二个事件"); 
  } 
  btn.onclick = function(){ 
    alert("第三个事件"); 
  } 
}

Salin selepas log masuk

Akhirnya, hanya acara ketiga dikeluarkan, kerana kaedah terakhir menimpa kaedah sebelumnya.

Fungsi mengikat acara asal addEventListener:

var eventOne = function(){ 
  alert("第一个监听事件"); 
} 
function eventTwo(){ 
  alert("第二个监听事件"); 
} 
window.onload = function(){ 
  var btn = document.getElementById("yuanEvent"); 
  //addEventListener：绑定函数 
  btn.addEventListener("click",eventOne); 
  btn.addEventListener("click",eventTwo); 
}

Salin selepas log masuk

Output: acara mendengar pertama dan acara mendengar kedua

2. Selepas menggunakan pemantauan acara untuk mengikat kaedah pada objek, anda boleh menyahjilidkan penulisannya adalah seperti berikut:

var eventOne = function(){ 
  alert("第一个监听事件"); 
} 
function eventTwo(){ 
  alert("第二个监听事件"); 
} 
window.onload = function(){ 
  var btn = document.getElementById("yuanEvent"); 
  btn.addEventListener("click",eventOne); 
  btn.addEventListener("click",eventTwo); 
  btn.removeEventListener("click",eventOne); 
}

Salin selepas log masuk

Output: Acara pendengaran kedua

3. Apabila menyahikat acara, anda mesti menggunakan pemegang fungsi itu tidak akan melepaskannya.

Ejaan yang salah:

btn.addEventListener("click",function(){ 
  alert(11); 
}); 
btn.removeEventListener("click",function(){ 
  alert(11); 
});

Salin selepas log masuk

Tulisan yang betul:

btn.addEventListener("click",eventTwo); 
btn.removeEventListener("click",eventOne);

Salin selepas log masuk

Ringkasan: Acara mendengar selepas merangkum fungsi adalah seperti berikut, serasi dengan semua penyemak imbas arus perdana utama.

/* 
 * addEventListener:监听Dom元素的事件 
 *  
 * target：监听对象 
 * type：监听函数类型，如click,mouseover 
 * func：监听函数 
 */ 
function addEventHandler(target,type,func){ 
  if(target.addEventListener){ 
    //监听IE9，谷歌和火狐 
    target.addEventListener(type, func, false); 
  }else if(target.attachEvent){ 
    target.attachEvent("on" + type, func); 
  }else{ 
    target["on" + type] = func; 
  }  
} 
/* 
 * removeEventHandler:移除Dom元素的事件 
 *  
 * target：监听对象 
 * type：监听函数类型，如click,mouseover 
 * func：监听函数 
 */ 
function removeEventHandler(target, type, func) { 
  if (target.removeEventListener){ 
    //监听IE9，谷歌和火狐 
    target.removeEventListener(type, func, false); 
  } else if (target.detachEvent){ 
    target.detachEvent("on" + type, func); 
  }else { 
    delete target["on" + type]; 
  } 
} 
var eventOne = function(){ 
  alert("第一个监听事件"); 
} 
function eventTwo(){ 
  alert("第二个监听事件"); 
} 
window.onload = function(){ 
  var bindEventBtn = document.getElementById("bindEvent"); 
  //监听eventOne事件 
  addEventHandler(bindEventBtn,"click",eventOne); 
  //监听eventTwo事件 
  addEventHandler(bindEventBtn,"click",eventTwo ); 
  //监听本身的事件 
  addEventHandler(bindEventBtn,"click",function(){ 
    alert("第三个监听事件"); 
  }); 
  //取消第一个监听事件 
  removeEventHandler(bindEventBtn,"click",eventOne); 
  //取消第二个监听事件 
  removeEventHandler(bindEventBtn,"click",eventTwo); 
}

Salin selepas log masuk

Contoh:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Event</title> 
    <script type="text/javascript"> 
      function addEventHandler(target,type,func){ 
        if(target.addEventListener){ 
          //监听IE9，谷歌和火狐 
          target.addEventListener(type, func, false); 
        }else if(target.attachEvent){ 
          target.attachEvent("on" + type, func); 
        }else{ 
          target["on" + type] = func; 
        }  
      } 
      function removeEventHandler(target, type, func) { 
        if (target.removeEventListener){ 
          //监听IE9，谷歌和火狐 
          target.removeEventListener(type, func, false); 
        } else if (target.detachEvent){ 
          target.detachEvent("on" + type, func); 
        }else { 
          delete target["on" + type]; 
        } 
      } 
      var eventOne = function(){ 
        alert("第一个监听事件"); 
      } 
      function eventTwo(){ 
        alert("第二个监听事件"); 
      } 
      window.onload = function(){ 
        var bindEventBtn = document.getElementById("bindEvent"); 
        //监听eventOne事件 
        addEventHandler(bindEventBtn,"click",eventOne); 
        //监听eventTwo事件 
        addEventHandler(bindEventBtn,"click",eventTwo ); 
        //监听本身的事件 
        addEventHandler(bindEventBtn,"click",function(){ 
          alert("第三个监听事件"); 
        }); 
        //取消第一个监听事件 
        removeEventHandler(bindEventBtn,"click",eventOne); 
        //取消第二个监听事件 
        removeEventHandler(bindEventBtn,"click",eventTwo); 
      } 
    </script> 
  </head> 
  <body> 
    <input type="button" value="测试" id="bindEvent"> 
    <input type="button" value="测试2" id="yuanEvent"> 
  </body> 
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.