欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

理解JS綁定事件

 更新時間：2016年01月19日 14:21:58   作者：YvetteLau  
這篇文章主要幫助大家深入理解JS綁定事件，介紹了六種JS綁定事件的情況，感興趣的小伙伴們可以參考一下

本文為大家詳細(xì)分析了JS綁定事件，供大家參考，具體內(nèi)容如下

綁定事件有兼容性問題，在IE早期版本中使用的是obj.attachEvent()，而其他瀏覽器使用的則是addEventListener()。
這兩個方法都有三個參數(shù)，分別為：事件類型，事件函數(shù)，最后一個是布爾值，true或者是false。
true表示在事件捕獲階段執(zhí)行，false表示在事件冒泡階段執(zhí)行。
由于IE只支持事件冒泡，所以同大多數(shù)情況下，都是將事件處理程序添加到事件流的冒泡階段，即默認(rèn)為”false”
這樣可以最大限度地兼容各種瀏覽器。 最好只在需要在是事件到達(dá)目標(biāo)之前截獲它的時候?qū)⑹录幚沓绦蛱砑拥讲东@階段。 如果不是特別需要，不建議在事件捕獲階段注冊事件處理程序。
兼容各瀏覽器的事件綁定：

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

調(diào)用時，注意callback函數(shù)不需要加括號，與setTimeout類似。

這部分都比較容易理解，對于最后一個參數(shù)，相信很多人并不是非常理解，總之我還是需要寫程序測試一下才真正弄通。

HTML部分內(nèi)容：

<!doctype html>
<html lang="en">
  <head>
  <!--網(wǎng)站編碼格式，UTF-8 國際編碼，GBK或 gb2312 中文編碼-->
    <meta charset="UTF-8">
    <meta name="Keywords" content="關(guān)鍵詞一，關(guān)鍵詞二">
    <meta name="Description" content="網(wǎng)站描述內(nèi)容">
    <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>

js內(nèi)容：(第一種情況)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //點(diǎn)擊inner時，觸發(fā)順序?yàn)椋篿nner-------middle------out
  out.addEventListener('click',function(){alert("我是最外面的");},false);   
  middle.addEventListener('click',function(){alert("我是中間的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},false); 
</script>

js內(nèi)容：(第二種情況)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //點(diǎn)擊inner時，觸發(fā)順序?yàn)椋簅ut------inner-------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中間的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},true); 
</script>

js內(nèi)容：(第三種情況)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //點(diǎn)擊inner時，觸發(fā)順序?yàn)椋簅ut------inner-------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中間的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

js內(nèi)容：(第四種情況)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //點(diǎn)擊inner時，觸發(fā)順序?yàn)椋簅ut-------middle------inner
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中間的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

js內(nèi)容：(第五種情況)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //點(diǎn)擊inner時，觸發(fā)順序?yàn)椋簃iddle-------inner------out
  out.addEventListener('click',function(){alert("我是最外面的");},false);   
  middle.addEventListener('click',function(){alert("我是中間的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

js內(nèi)容：(第六種情況)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //點(diǎn)擊inner時，觸發(fā)順序?yàn)椋簅ut-------inner------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中間的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>

看完以上六種情況對應(yīng)的結(jié)果，相信您已經(jīng)能夠深刻理解，最后一個參數(shù)為true或false的區(qū)別了。

相關(guān)文章

最新評論