關於js的addEventListener 和一些常用事件

element.addEventListener(<event-name>, <callback>, <use-capture>);
document.addEventListener("touchstart", function(){}, true)
el.addEventListener('click',function(){},false);

                addEventListener里最后一個參數決定該事件的響應順序；

                如果為true事件執行順序為 addEventListener ---- 標簽的onclick事件 ---- document.onclick　

                如果為false事件的順序為 標簽的onclick事件 ---- document.onclick ---- addEventListener

分別解釋:

event-name(string)
這是你想監聽的事件的名稱或類型。它可以是任何的標准DOM事件（click, mousedown, touchstart, transitionEnd,等等），當然也可以是你自己定義的事件名稱

callback(function)（回調函數）
這個函數會在事件觸發的時候被調用。相應的事件(event)對象，以及事件的數據，會被作為第一個參數傳入這個函數

use-capture(boolean)
這個參數決定了回調函數(callback)是否在“捕獲(capture)”階段被觸發

var element = document.getElementById('element');
 
function callback() {
  alert('Hello');
}
 
// Add listener
element.addEventListener('click', callback);

移除事件監聽

element.removeEventListener(<event-name>, <callback>, <use-capture>);

注意:移除時必須要有這個被綁定的回調函數的引用。簡單地調用element.removeEventListener('click');是不能達到想要的效果的

所以 如果（我們在長時間運行(long-lived)的應用中需要用到）,那么我們就需要保留回調函數的句柄。意思就是說，我們不能使用匿名函數作為回調函數.


 

//注意函數句柄執行的上下文, 否則很容易發生事件的回調函數不在你所期望的上下文中執行
//如:
<p id="el"> click me!! </p>

var el = document.getElementById('el');

var user = {
    name: 'tom',
    sayhi: function(){
        console.log(this.name);
    }   
}

el.addEventListener('click',user.sayhi);   //輸出undefined

//why? 因為注意此時 this 實際指向的是el,而非user, 因為我們傳遞的只是一個函數句柄引用,而不是傳過去整個函數上下文(user對象)

要改,很簡單
el.addEventListener('click',function(){ user.sayhi(); });

但是這樣改有一個缺點,因為我們實際上使用了一個匿名函數來引入需要的上下文,而這個匿名函數本身沒有一個句柄引用可以在 removeEventListener中引用, 
也就是說 不好在需要的時候移除監聽事件

所以我們可以使用另一種方式 .bind()(ECMAScript 5標准內建函數對象的原型方法)
var user.sayhi = user.sayhi.bind(user);
el.addEventListener('click',user.sayhi);
//同時可以方便的移除對應的事件監聽
el.removeEventListener('click',user.sayhi);

 

鼠標事件
               

 document.addEventListener('mousedown', mouseDown);
 document.addEventListener('click', mouseClick);
 document.addEventListener('mouseup', mouseUp);

 

 touch事件
               

document.addEventListener('touchstart', touchStart);
document.addEventListener('touchend', touchEnd);

       // touchstart事件：當手指觸摸屏幕時候觸發，即使已經有一個手指放在屏幕上也會觸發
       // touchmove事件：當手指在屏幕上滑動的時候連續地觸發。在這個事件發生期間，調用preventDefault()事件可以阻止滾動

       // touchend事件：當手指從屏幕上離開的時候觸發。
       // touchcancel事件：當系統停止跟蹤觸摸的時候觸發。關於這個事件的確切出發時間，文檔中並沒有具體說明，只好去猜測
         (在ios設備上的表現是常按着一段時間后自動結束touchstart事件的調用)

    

每個touch事件自帶三個屬性
     touches：表示當前跟蹤的觸摸操作的touch對象的數組。
     targetTouches：特定於事件目標的Touch對象的數組。
　　changeTouches：表示自上次觸摸以來發生了什么改變的Touch對象的數組
                
     每個touches 自帶
         clientX：觸摸目標在視口中的x坐標。
         clientY：觸摸目標在視口中的y坐標。
         identifier：標識觸摸的唯一ID。
         pageX：觸摸目標在頁面中的x坐標。
         pageY：觸摸目標在頁面中的y坐標。
         screenX：觸摸目標在屏幕中的x坐標。
         screenY：觸摸目標在屏幕中的y坐標。
         target：觸目的DOM節點目標

 支持:

                iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG專有OS中的Phantom瀏覽器。目前只有iOs版Safari支持多點觸摸。PC版Firefox 6+ 和Chrome也支持觸摸事件

     代碼實例1
               

var gotouch=function(){
       alert('touchstartok');
}

document.addEventListener("touchstart", gotouch);

//note: 第三個參數不寫 默認為false  

public override function addEventListener(
    type:String,
    listener:Function,
    useCapture:Boolean = false,
    priority:int = 0,
    useWeakReference:Boolean = false
):void

                  

       代碼實例2
                 

 function Go(){   //...     }
 
document.getElementById("testButton").addEventListener("click", Go, false);  

// 或者 listener 直接就是函數
                
document.getElementById("testButton").addEventListener("click", function () { ... }, false);  

document.getElementById("testButton").removeEventListener("click", Go);    // 刪除監聽事件