Memahami kemahiran JS binding events_javascript-tutorial js-php.cn

Memahami kemahiran JS binding events_javascript

WBOY

Lepaskan： 2016-05-16 15:19:08

asal

1230 orang telah melayarinya

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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.