1. 程式人生 > >js addEventListener(eventype,function,false/true); false true的區別

js addEventListener(eventype,function,false/true); false true的區別

點擊 ntb 事件 doc div alert () att -m

第三個參數false true的區別

true 在捕獲節點的時候就觸發事件 ,由外到內

false 在冒泡的時候才觸發事件,由內到外

html:

  1. <div id="out">
  2. <p>最外面</p>
  3. <div id="middle">
  4.     在中間
  5. <div id="inner">最裏面</div>
  6. </div>
  7. </div>

js:

//情況一
var out1 = document.getElementById(‘out‘);
var middle1 = document.getElementById(‘middle‘);
var inner1 = document.getElementById(‘inner‘);
//點擊inner時,觸發順序為:inner-------middle------out
out1.addEventListener(‘click‘,function(){alert("我是最外面的");},false);
middle1.addEventListener(‘click‘,function(){alert("我是中間的");},false);
inner1.addEventListener(‘click‘,function(){alert("我是最裏面的");},false);

//情況二
var out2 = document.getElementById(‘out‘);
var middle2 = document.getElementById(‘middle‘);
var inner2 = document.getElementById(‘inner‘);
//點擊inner時,觸發順序為:out------middle-------inner
out2.addEventListener(‘click‘,function(){alert("我是最外面的");},true);
middle2.addEventListener(‘click‘,function(){alert("我是中間的");},true);
inner2.addEventListener(‘click‘,function(){alert("我是最裏面的");},true);

js addEventListener(eventype,function,false/true); false true的區別