Rumah >hujung hadapan web >tutorial js >Memahami kemahiran JS binding events_javascript

Memahami kemahiran JS binding events_javascript

WBOYasal: 2016-05-16 15:19:081257semak imbas

Artikel ini menyediakan analisis terperinci tentang peristiwa mengikat JS untuk rujukan anda Kandungan khusus adalah seperti berikut

Terdapat isu keserasian dengan peristiwa yang mengikat Dalam versi awal IE, obj.attachEvent() telah digunakan, manakala penyemak imbas lain menggunakan addEventListener().
Kedua-dua kaedah mempunyai tiga parameter, iaitu: jenis acara, fungsi acara , yang terakhir ialah Nilai Boolean , benar atau palsu.
benar bermaksud melaksanakan dalam fasa tangkapan acara, palsu bermaksud melaksanakan dalam fasa menggelegak acara.
Memandangkan IE hanya menyokong acara menggelegak, dalam kebanyakan kes, pengendali acara ditambahkan pada peringkat menggelegak aliran acara, yang lalai kepada "palsu"
Ini memaksimumkan keserasian dengan pelbagai pelayar. Adalah lebih baik untuk menambah pengendali acara pada fasa tangkapan hanya apabila anda perlu memintas acara sebelum ia mencapai sasaran. Ia tidak disyorkan untuk mendaftarkan pengendali acara semasa fasa penangkapan acara melainkan diperlukan secara khusus.
Serasi dengan pengikatan acara pelbagai pelayar:

 function addEvent(obj, eventType, callback, bubble){
 if(obj.addEventListener){
  obj.addEventListener(eventType, callback, bubble);
 }else{
  obj.attachEvent(eventType, callback, bubble);
 }
 }

Apabila membuat panggilan, ambil perhatian bahawa fungsi panggil balik tidak memerlukan tanda kurung, sama seperti setTimeout.

Bahagian ini agak mudah difahami Bagi parameter terakhir, saya percaya ramai orang tidak memahaminya dengan baik, saya masih perlu menulis program untuk mengujinya sebelum saya benar-benar memahaminya.

Bahagian HTML:

<!doctype html>
<html lang="en">
  <head>
  <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词一，关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="">
    <title>Document</title>
  <!--css js 文件的引入-->
  </head>
  <body>
    <div id="out"> 
    <p>我是路人甲</p>
    <div id="middle"> 
      <div id="inner">最里面的</div> 
    </div> 
    <p>我是路人乙</p>
    </div>
  </body>
</html>

kandungan js: (kes pertama)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：inner-------middle------out
  out.addEventListener('click',function(){alert("我是最外面的");},false);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},false); 
</script>

kandungan js: (Kes kedua)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out------inner-------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},true); 
</script>

kandungan js: (Kes ketiga)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out------inner-------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

kandungan js: (Kes keempat)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out-------middle------inner
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

kandungan js: (situasi kelima)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：middle-------inner------out
  out.addEventListener('click',function(){alert("我是最外面的");},false);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

kandungan js: (Kes keenam)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out-------inner------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>

Selepas membaca keputusan yang sepadan dengan enam situasi di atas, saya percaya anda sudah dapat memahami dengan mendalam perbezaan antara parameter terakhir adalah benar atau salah.

Kenyataan：

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

Artikel sebelumnya：Penjelasan terperinci tentang teknik misai enjin template Javascript.js_javascriptArtikel seterusnya：Penjelasan terperinci tentang teknik misai enjin template Javascript.js_javascript

Artikel berkaitan

Lihat lagi