不想上班的程式筆記

// 第一個參數是哪一個語法
// 第二個參數是匿名參數
// 第三個參數是從指定的元素往外找
el.addEventListner('click',function(e){},false);

以上是事件第一章，監聽事件所教的內容。

第三個參數預設是false

var el = document.querySelector('.box');

el.addEventListener('click',function(e){  
  alert('box');
  // console.log('box');
},false);

var elBody = document.querySelector('.body');
elBody.addEventListener('click',function(){
  alert('body');
  console.log('body');
},false);


==> 這會變成 alert box 先跳出 在跳出 alert body;

改成true
var el = document.querySelector('.box');

el.addEventListener('click',function(e){  
  alert('box');
  // console.log('box');
},true);

var elBody = document.querySelector('.body');
elBody.addEventListener('click',function(){
  alert('body');
  console.log('body');
},true);

==> 這會變成 alert body 先跳出 在跳出  alert box;

false 是從指定元素往外找 ex:div=>body (事件氣泡) event Bubbling

true  是從最外面找到指定元素 ex:body=>div(事件捕捉) event captureing

停止事件氣泡產生

為了讓事件監聽不衝突~以下有這程式碼

e.stopPropagration 防止多監聽產生 

參考範例

document.getElementById("myBtn").addEventListener("click", function(e)
{
    // 其他的監聽不要管，以防多個監聽事件產生
	e.stopPropagration();
    document.getElementById("demo").innerHTML = "Hello World";
});

e.preventDefault  取消預設行為、停止事件的默認動作

如果我們想把預設行為取消 則是用preventDefault

例如submit a的href跳轉;

var el =document.querySelector('.link');

el.addEventListner('click',function(e){

  // 取消元素的默認行為 譬如說跳轉到指定網頁、送出等等
  // devug時候 滿常用到的 就是測試參數 但是我不想要post到後端
  e.preventDefault();
  
  // todo....

},false)

 

主要是做我的學習筆記

偶而心血來潮寫個幾篇~

若有問題~可以寫信或在下方留言~感謝