addEventListener事件處理

• false (事件氣泡 - event Bubbling) - 從指定元素往外找
• true (事件捕捉 - event capturing) - 從最外面找到指定元素

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

//監聽
el.addEventListener('click',function(e){
  alert('hello');
},false)

e.stopPropagation();阻止你尋找下一層，只停留在本層

var el = document.querySelector('.box');
el.addEventListener('click',function(e){
  e.stopPropagation();
  alert('box');
},true)

preventDefault();取消元素的默認行為

elno.addEventListener('click',function(e){
    //取消元素的默認行為
    //原本點連結會跳轉到指定的網頁
    // submit 按鈕 先透過我的JS查詢表單有無錯誤，POST去傳送
    e.preventDefault();
    console.log('test');
},false)

e使用時機

當你用去抓當下 event 狀態的時候，就會用到哩，他會把你目前觸發的資訊都記錄到第一個參數裡面，
例如 event 章節的 keycode ，我為了要知道目前我點擊的是哪個鍵盤按鈕
所以就必須用 e 得知我所獲得的資訊。

e.target.nodeName(了解目前元素的位置)

el.addEventListener('click',function(e){
  console.log(e.target.nodeName);
  //可以知道你現在點擊的是ul / li /a ....
},false

e.target.value(select)

var len = country.length;
area.addEventListener('change', updateList, false)
function updateList(e){
    var select = e.target.value;
    var str='';
    for(var i=0;len>i;i++){
        if(select== country[i].place){
            str += '<li>'+country[i].farmer+'</li>'
        }
    }
    list.innerHTML = str;
}

e.kecode

var body = document.body;
body.addEventListener('keydown', goRocket, false)
function goRocket(e){
    switch(e.keyCode){
        case 49:
            document.querySelector('.rocket-1').style.bottom = '2000px'
            break;
        case 50:
            document.querySelector('.rocket-2').style.bottom = '2000px'
            break;
        case 51: 
            document.querySelector('.rocket-3').style.bottom = '2000px'
            break;
    }
}

addEventListener('blur')移開焦點事件觸發

var ham = document.getElementById('hamNumId');
ham.addEventListener('blur',checkContent,false);
function checkContent(e){
    var str =  e.target.value;
    if(str==''){
        alert('此欄位不可為空')
    }
}

addEventListener('mousemove')滑鼠移入觸發

var el = document.querySelectorAll('.box');
var Len = el.length;
for(var i = 0;i<Len;i++){
  el[i].addEventListener('mousemove',function(e){
    alert('你輸了！');
  });
}

e.screen(看電腦螢幕解析度)/page(整個網頁的高度))/client(目前瀏覽器窗口大小滑鼠移動高度固定)

function getPosition(e) {                 
  screenX.textContent = e.screenX;                    
  screenY.textContent = e.screenY;                    
  pageX.textContent = e.pageX;                   
  pageY.textContent = e.pageY;                     
  clientX.textContent = e.clientX;                   
  clientY.textContent = e.clientY;                  
}

從父元素來監聽子元素內容 (希望都監聽的到UL )

var list = document.querySelector('.list');
list.addEventListener('click',checkName,false)
function checkName(e){
    if(e.target.nodeName!=='LI'){return};
    console.log(e.target.textContent);
}

／／一班點擊是內到外

如果是事件偵聽器時使用 capture 模式 (事件改為由外而內)