事件流

事件流描述的是從頁面中接收事件的順序，IE和Netscape提出來差不多完全相反的事件流的概念，IE事件流是事件冒泡流，Netscape事件流是事件捕獲流。

事件冒泡

IE的事件流叫做事件冒泡，即事件開始時(shí)由最具體的元素(文檔中嵌套最深的那個(gè)節(jié)點(diǎn))接收，然后逐級向上（一直到文檔）；如下代碼：

 

<p id = "p">
    <span id="span">
        <a id="aTag">事件測試</a>
    </span>
</p>

 

JS如下：

 

document.getElementById("aTag").addEventListener('click',aTag);
document.getElementById("span").addEventListener('click',span);
document.getElementById("p").addEventListener('click',p);
function aTag(e) {
    alert("點(diǎn)擊的是a標(biāo)簽");
}
function span(e) {
    alert("點(diǎn)擊的是span標(biāo)簽");
}
function p(e) {
    alert("點(diǎn)擊的是p標(biāo)簽");
}

 

當(dāng)單擊 “事件測試”文字后，那么click事件會(huì)按照如下順序傳播；

1)先打印出：點(diǎn)擊的是a標(biāo)簽

2) 再打印出：點(diǎn)擊的是span標(biāo)簽

3) 最后打印出：點(diǎn)擊的是p標(biāo)簽

4)  最后肯定是document文檔。

所有現(xiàn)代瀏覽器都支持事件冒泡。

事件捕獲：

事件捕獲與事件冒泡事件流正好相反的順序，事件捕獲的事件流是最外層逐級向內(nèi)傳播，也就是先document，然后逐級p標(biāo)簽 ， span標(biāo)簽 , a標(biāo)簽;

上面的JS代碼改成如下：

 

document.getElementById("p").addEventListener('click',p,true);
document.getElementById("aTag").addEventListener('click',aTag,true);
document.getElementById("span").addEventListener('click',span,true);

 

第三個(gè)參數(shù)設(shè)置為true，即為捕獲事件，默認(rèn)為false；否則的話，事件流還是和上面的一樣，因?yàn)椴还苁窃贗E還是標(biāo)準(zhǔn)瀏覽器下，事件冒泡瀏覽器都支持的。

#p#

DOM事件流

DOM2級事件規(guī)定的事件流包括三個(gè)階段，分別是：事件捕獲階段，處于目標(biāo)階段和事件冒泡階段。示意圖就不畫了，具體的可以看看書。

DOM0級事件處理程序

如下代碼是DOM0級事件處理程序：

 

var btn = document.getElementById("btn");
btn.onclick = function(){
     alert("Clicked");
};

 

使用DOM0級方法指定的事件處理程序被認(rèn)為是元素的方法，處理程序是在元素的作用域進(jìn)行的，程序中this是引用的是當(dāng)前元素。

 

<p id="btn">btn</p>
var btn = document.getElementById("btn");
btn.onclick = function(){
    alert(this.id); // 彈出btn
}

 

單擊元素btn后，通過this.id取得元素的屬性id，還可以通過this訪問元素的任何屬性和方法，以這種方式添加的事情處理程序在事件流的冒泡階段處理。

也可以刪除通過DOM0級方法指定的事件處理程序，只要將事件處理程序的屬性值設(shè)置為null即可。

btn.onclick = null; // 刪除事件處理程序；

如下JS代碼改成如下：

 

var btn = document.getElementById("btn");
btn.onclick = function(){
    alert(this.id);
}
btn.onclick = null;

 

再單擊btn后，沒有任何反應(yīng)；

DOM2級事件處理程序

DOM2級事件定義了2個(gè)方法，用于處理指定和刪除事件處理程序的操作；

addEventListener()和removeEventListener()。所有DOM節(jié)點(diǎn)都包含這兩個(gè)方法，他們包含三個(gè)參數(shù)，第一個(gè) 參數(shù)為事件類型；第二個(gè)參數(shù)為事件函數(shù)，第三個(gè)參數(shù)為布爾值，如果是true的話，說明是事件流是捕獲事件，如果是false的話，那么事件流是冒泡事 件；

比如如上的btn代碼，我們改成如下：

 

var btn = document.getElementById("btn");
btn.addEventListener('click',function(e){
    alert(this.id);
},false);

 

上面的點(diǎn)擊事件是在冒泡階段被觸發(fā)，與DOM0級方法一樣，這里添加的事件處理程序也是在其依副的元素作用域中運(yùn)行，使用DOM2級添加事件處理程序的好處是可以添加多個(gè)事件處理程序，如下代碼：

 

var btn = document.getElementById("btn");
btn.addEventListener('click',function(e){
    alert(this.id);
},false);
btn.addEventListener('click',function(e){
    alert("我是來測試的");
},false);

 

上面的代碼被彈出2次對話框，而在DOM0級是不可以的；它永遠(yuǎn)是執(zhí)行最后一次的。

addEventListener添加的事件只能使用removeEventListener來刪除相對應(yīng)的事件，那么如上的JS不能按照上面的方式來編寫哦！需要給定義一個(gè)函數(shù)；如下：

 

btn.addEventListener('click',handler,false);
function handler(e){
   alert(this.id);
}

 

可以使用如下方式對click事件刪除；如下代碼：

btn.removeEventListener(‘click’,handler);

上面的是在標(biāo)準(zhǔn)瀏覽器下處理的事件，下面我們來看看在IE下處理的事件；

#p#

IE事件處理的程序

IE實(shí)現(xiàn)了與DOM類似的2個(gè)方法，分別是attachEvent()和detachEvent()，這兩個(gè)方法只接受2個(gè)參數(shù)，第一個(gè)參數(shù)是事件 名稱，第二個(gè)參數(shù)是要處理的函數(shù)；由于IE8及更早版本只支持事件冒泡，所以通過attachEvent()添加的事件處理程序會(huì)被添加到冒泡階段；

下面是IE事件處理程序的代碼如下：

 

btn.attachEvent('onclick',handler);
function handler(e){
    alert(this); // window
}

 

注意：attachEvent的事件名稱是onclick，而addEventListener的事件名稱是click，且IE中使用的 attachEvent()與使用DOM0級方法的的主要區(qū)別在于事件處理程序的作用域，在使用dom0級情況下，事件處理程序在其所屬元素的作用域內(nèi)運(yùn) 行，在使用attachEvent()方法的情況下，事件處理程序在全局作用域下運(yùn)行，其中的this等于window。

與addEventListener一樣，attachEvent也可以注冊多個(gè)點(diǎn)擊click事件，如下代碼：

 

btn.attachEvent('onclick',function(e){
    alert("1");
});
btn.attachEvent('onclick',function(e){
    alert("2");
});

 

但是與Dom方法不同的是，這些事件處理程序不是以添加他們的順序執(zhí)行，而是以相反的順序觸發(fā)，比如如上代碼，會(huì)先彈出2，然后彈出1對話框；

使用attachEvent注冊的事件只能使用detachEvent()方法來移除；

下面我們可以來編寫跨瀏覽器的事件處理程序；代碼如下：

 

var EventUtil = {
    addHandler: function(element,type,handler) {
        if(element.addEventListener) {
                        element.addEventListener(type,handler,false);
        }else if(element.attachEvent) {
                    element.attachEvent("on"+type,handler);
        }else {
            element["on" +type] = handler;
        }
    },
    removeHandler: function(element,type,handler){
        if(element.removeEventListener) {
                    element.removeEventListener(type,handler,false);
        }else if(element.detachEvent) {
                    element.detachEvent("on"+type,handler);
        }else {
            element["on" +type] = null;
        }
    }
};

 

下面我們可以使用這個(gè)封裝的函數(shù)代碼來測試之前的代碼了，代碼改成如下所示：

 

function handler(){
    alert(1);
}
EventUtil.addHandler(btn,'click',handler);

 

在IE或者標(biāo)準(zhǔn)瀏覽器下都會(huì)彈出1；如果我們需要移除click事件的話，我們可以使用如下代碼：

EventUtil.removeHandler(btn,’click’,handler);

然后在標(biāo)準(zhǔn)瀏覽器下或者IE下點(diǎn)擊btn元素都沒有反應(yīng)；

事件對象：

在觸發(fā)DOM上的某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對象event，這個(gè)對象中包含著所有與事件有關(guān)的信息；包括導(dǎo)致事件的元素，事件的類型以及其他與特定事件相關(guān)的信息。我們來看看dom0級和dom2級的事件對象Event；

比如如下代碼：

 

var btn = document.getElementById("btn");
btn.onclick = function(e){
    console.log(e);
}

 

打印如下：

下面我們來看看最基本的成員的含義吧；如下：

屬性/方法	類型	含義
bubbles	Boolean	事件是否冒泡
cancelable	Boolean	是否可以取消事件的默認(rèn)行為
currentTarget	Boolean	事件處理程序當(dāng)前正在處理事件的那個(gè)元素
defaultPrevented	Boolean	為true 表示已經(jīng)調(diào)用了preventDefault()
detail	Integer	與事件相關(guān)的細(xì)節(jié)信息
eventPhase	Integer	調(diào)用事件處理程序的階段：1表示捕獲階段，2表示“處于目標(biāo)”，3表示冒泡階段
preventDefault()	Function	取消事件的默認(rèn)行為。如果cancelable是true，則可以使用這個(gè)方法
stopImmediatePropagation()	Function	取消事件的進(jìn)一步捕獲或冒泡，同時(shí)阻止任何事件處理程序被調(diào)用
stopPropagation()	Function	取消事件的進(jìn)一步捕獲或冒泡。如果bubbles為true，則可以使用這個(gè)方法
target	Element	事件的目標(biāo)
type	String	被觸發(fā)的事件的類型
view	AbstractView	與事件關(guān)聯(lián)的抽象視圖。等同于發(fā)生事件的window對象

#p#

理解currentTarget與target

在事件處理程序內(nèi)部，this始終等于currentTarget值，即currentTarget是指當(dāng)前被觸發(fā)或者說正在處理事件的那個(gè)元素， 而target是指當(dāng)前的目標(biāo)元素；比如如下代碼，對btn按鈕觸發(fā)點(diǎn)擊事件，那么e.currentTraget指向了this，e.target也指 向了this；如下代碼：

 

var btn = document.getElementById("btn");
btn.onclick = function(e){
    console.log(e.currentTarget == this); // true
    console.log(e.target == this);  // true
}

 

但是如果我對document.body觸發(fā)點(diǎn)擊的話，那么e.currentTarget就指向了document.body了，那么e.target 指向與 btn那個(gè)元素了，如下代碼：

 

document.body.onclick = function(e){
    console.log(e.currentTarget === document.body); // true
    console.log(document.body === this);  // true
    console.log(e.target === document.getElementById("btn")); //true
};

 

現(xiàn)在應(yīng)該能理解currentTarget與target的區(qū)別吧！currentTarget就是指被點(diǎn)擊的那個(gè)元素，但是target是當(dāng)前點(diǎn) 擊的目標(biāo)元素，如上代碼，由于btn上并沒有注冊事件，結(jié)果click事件就冒泡到了document.body，在那里事件才得到了處理。

理解標(biāo)準(zhǔn)瀏覽器下的事件對象與IE下的事件對象

標(biāo)準(zhǔn)瀏覽器下的事件對象是event，比如btn點(diǎn)擊后；如下代碼：

 

var btn = document.getElementById("btn");
btn.onclick = function(){
    console.log(event); //標(biāo)準(zhǔn)瀏覽器下打印事件對象
    console.log(event.type);//'click'
}
btn.onclick = function(){
    // IE下打印的事件對象window.event
    console.log(window.event);
    console.log(window.event.type); // 'click'
 }

 

上面的寫法是在DOM0級上注冊事件，如果我們在Dom2級上注冊事件的話，那么就會(huì)有一個(gè)事件對象event作為參數(shù)傳入事件到函數(shù)中，如下：

 

var btn = document.getElementById("btn");
EventUtil.addHandler(btn,'click',function(e){
    console.log(e);
});

 

理解特定事件的默認(rèn)行為事件

在標(biāo)準(zhǔn)瀏覽器下，在阻止特定事件的默認(rèn)行為，可以使用preventDefault()方法，比如如下，我點(diǎn)擊一個(gè)連接，按道理是打開一個(gè)新連接窗口，但是我使用preventDefault()方法可以阻止默認(rèn)行為，阻止打開新窗口；如下代碼：

 

HTML：<a href="http://www.baidu.com" id="alink" target="_blank">打開新連接</a>
JS如下：
var alink = document.getElementById("alink");
alink.onclick = function(e){
    console.log(e)
    e.preventDefault();
}

 

就可以阻止頁面進(jìn)行跳轉(zhuǎn)了~ 這是標(biāo)準(zhǔn)瀏覽器下處理方式，下面我們來看看IE是如何處理默認(rèn)事件的；

IE下使用returnValue屬性來取消給定事件的默認(rèn)行為，只要將returnValue屬性值設(shè)置為false即可，就可以阻止瀏覽器的默認(rèn)行為，如下代碼：

 

alink.onclick = function(){
    console.log(window.event)
    window.event.returnValue = false;
}

 

標(biāo)準(zhǔn)瀏覽器下與IE下的事件目標(biāo)的區(qū)別

標(biāo)準(zhǔn)瀏覽器下使用e.target來指定當(dāng)前被點(diǎn)擊的目標(biāo)元素，如下代碼所示：

 

var btn = document.getElementById("btn");
btn.onclick = function(){
    console.log(event); 
    console.log(event.target); // 打印事件目標(biāo)元素
}

 

IE下是使用event.srcElement來指定當(dāng)前的目標(biāo)元素，如下代碼：

 

btn.onclick = function(){
    console.log(event); 
    console.log(window.event.srcElement);
}

 

理解標(biāo)準(zhǔn)瀏覽器與IE下阻止事件傳播的區(qū)別

在標(biāo)準(zhǔn)瀏覽器下我們可以使用stopPropagation()方法來停止事件在DOM層次中的傳播，即取消事件中的冒泡或者捕獲。從而避免觸發(fā)注冊在document.body上面的事件處理程序，如下所示：

 

var btn = document.getElementById("btn");
btn.onclick = function(e){
    alert(1);
    e.stopPropagation();
}
document.body.onclick = function(){
    alert(2);
}

 

如上代碼，如果我不使用stopPropagation()阻止冒泡事件的話，那么在頁面中會(huì)先彈出1，然后彈出2，如果使用stopPropagation()方法的話，只會(huì)在頁面上彈出1，就不會(huì)冒泡到body上面去；

IE下停止冒泡的話，我們可以使用cancelBubble屬性，我們只要將此屬性設(shè)置為true，即可阻止事件通過冒泡觸發(fā) document.body中的注冊事件。但是IE是不支持捕獲事件的，但是stopPropagation()即支持捕獲事件又支持冒泡事件的。如下代 碼：

 

btn.onclick = function(e){
    alert(1);
    window.event.cancelBubble = true;
}
document.body.onclick = function(){
    alert(2);
}

 

如果不設(shè)置window.event.cancelBubble 為true的話，就會(huì)先彈出1，然后彈出2，如果加上的話，就只會(huì)彈出1對話框。

理解了上面的區(qū)別后，我們現(xiàn)在可以往EventUtil對象里面添加跨瀏覽器的方法了；

#p#

跨瀏覽器的事件對象

 

var EventUtil = {
    addHandler: function(element,type,handler) {
        if(element.addEventListener) {
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent) {
            element.attachEvent("on"+type,handler);
        }else {
            element["on" +type] = handler;
        }
    },
    removeHandler: function(element,type,handler){
        if(element.removeEventListener) {
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent) {
            element.detachEvent("on"+type,handler);
        }else {
            element["on" +type] = null;
        }
    },
    getEvent: function(event) {
        return event ? event : window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event){
        if(event.preventDefault) {
            event.preventDefault();
        }else {
            event.returnValue = false;
        }
    },
    stopPropagation: function(event) {
        if(event.stopPropagation) {
            event.stopPropagation();
        }else {
            event.cancelBubble = true;
        }
    }
};

 

事件類型：

DOM3級事件規(guī)定了以下幾類事件；如下：

UI事件： 當(dāng)用戶與頁面上的元素交互時(shí)觸發(fā)；

load事件：當(dāng)頁面加載完后(包括所有圖像，所有javascript文件，css文件等外部資源)，就會(huì)觸發(fā)window上面的load事件，如下代碼是加載圖片的：

HTML代碼：<img src = “event.png” id=”img”/>

JS代碼如下：

 

var img = document.getElementById("img");
EventUtil.addHandler(img,'load',function(event){
      var event = EventUtil.getEvent(event);
      alert(EventUtil.getTarget(event).src);
});

 

當(dāng)圖片加載完后，就會(huì)彈出圖片的url地址了；

如果在創(chuàng)建新的img元素時(shí)，可以為其指定一個(gè)事件處理程序，以便圖像加載完成后給出提示，此時(shí)，最重要的是在指定src屬性之前先指定事件；如下代碼所示：

 

 EventUtil.addHandler(window,'load',function(){
    var img = document.createElement("img");
    EventUtil.addHandler(img,'load',function(e){
        e = EventUtil.getEvent(e);
        alert(EventUtil.getTarget(e).src);
    });
    document.body.appendChild(img);
    img.src = "event.png";
});

 

在圖像加載完成后，會(huì)彈出圖片地址了；

同樣的功能，我們可以使用DOM0級的Image對象來實(shí)現(xiàn)，在DOM出現(xiàn)之前，開發(fā)人員經(jīng)常使用Image對象在客戶端預(yù)加載圖像，如下代碼：

 

EventUtil.addHandler(window,'load',function(){
    var img = new Image();
    EventUtil.addHandler(img,'load',function(e){
        alert(1);
    });
    img.src ="event.png";
});

 

Script元素也支持load事件，但是IE8及以下不支持，在IE9+，F(xiàn)irefox，Opera，chrome及Safari3+都支持， 以便開發(fā)開發(fā)人員確定動(dòng)態(tài)加載的javascript文件是否加載完畢；比如我們動(dòng)態(tài)創(chuàng)建script標(biāo)簽后，通過load事件判斷動(dòng)態(tài)創(chuàng)建的 script標(biāo)簽是否加載完畢，代碼如下：

 

EventUtil.addHandler(window,'load',function(){
    var script = document.createElement("script");
    EventUtil.addHandler(script,'load',function(e){
        alert(1);
    });
    script.src = "a.js";
    document.body.appendChild(script);
});

 

焦點(diǎn)事件：當(dāng)元素獲得或失去焦點(diǎn)時(shí)觸發(fā)；

有：blur：在元素失去焦點(diǎn)時(shí)觸發(fā)，這個(gè)事件不會(huì)冒泡，所有瀏覽器都支持。

foucs：在元素獲得焦點(diǎn)時(shí)觸發(fā)，這個(gè)事件不會(huì)冒泡，所有瀏覽器都支持。

鼠標(biāo)事件：當(dāng)用戶通過鼠標(biāo)在頁面操作時(shí)觸發(fā)；

1. click事件：在用戶單擊鼠標(biāo)按鈕或者按下回車鍵觸發(fā)；
2. dblclick事件：在用戶雙擊鼠標(biāo)按鈕時(shí)被觸發(fā)；
3. mousedown事件：在用戶按下了任意鼠標(biāo)按鈕時(shí)被觸發(fā)，不能通過鍵盤觸發(fā)這個(gè)事件。
4. mouseenter事件：在鼠標(biāo)光標(biāo)從元素外部移動(dòng)到元素范圍之內(nèi)被觸發(fā)；這個(gè)事件不冒泡；
5. mousemove事件：當(dāng)鼠標(biāo)指針在元素內(nèi)部移動(dòng)時(shí)重復(fù)地觸發(fā)。
6. mouseout事件：用戶將其移入另一個(gè)元素內(nèi)被觸發(fā)。
7. mouseover事件：鼠標(biāo)指針在元素外部，用戶將移入另一個(gè)元素的邊界時(shí)觸發(fā)，感覺和mouseenter事件類似；
8. mouseup事件：用戶釋放鼠標(biāo)按鈕時(shí)觸發(fā)；

頁面上所有的元素都支持鼠標(biāo)事件，除了mouseenter和mouseleave，所有鼠標(biāo)事件都會(huì)冒泡，也可以被取消，而取消鼠標(biāo)事件將會(huì)影響瀏覽器的默認(rèn)行為。

#p#

理解客戶區(qū)坐標(biāo)位置

含義是：鼠標(biāo)指針在可視區(qū)中的水平clientX和垂直clientY坐標(biāo)；

如下圖所示：

代碼如下：

 

EventUtil.addHandler(btn,'click',function(e){
    e = EventUtil.getEvent(e);
    console.log("可視區(qū)X軸坐標(biāo)為:"+e.clientX + " "+ "可視區(qū)Y軸坐標(biāo)為:"+e.clientY);
});

 

注意：客戶區(qū)坐標(biāo)位置不包含滾動(dòng)條滾動(dòng)的位置，因此這個(gè)位置不代表鼠標(biāo)在頁面上的位置；

理解頁面坐標(biāo)位置pageX和pageY：

pageX與pageY是指頁面坐標(biāo)的位置，與clientX和clientY的區(qū)別是：它包含頁面滾動(dòng)條的位置，如下圖所示：

代碼如下：

 

EventUtil.addHandler(btn,'click',function(e){
    e = EventUtil.getEvent(e);
    console.log("頁面X軸坐標(biāo)為:"+e.pageX + " "+ "頁面Y軸坐標(biāo)為:"+e.pageY);
});

 

在頁面沒有滾動(dòng)條的情況下，pageX與clientX相等，同理pageY與clientY相等。

但是IE8及更早的版本不支持pageX與pageY,不過我們可以使用客戶區(qū)坐標(biāo)(client,clientY)和滾動(dòng)坐標(biāo)計(jì)算出來；因此我們 需要用到document.body（混雜模式下）或 document.documentElement（標(biāo)準(zhǔn)模式下）中的scrollLeft和scrollTop屬性；

對此我們可以封裝代碼如下：

 

EventUtil.addHandler(btn,'click',function(e){
    e = EventUtil.getEvent(e);
    var pageX = e.pageX,
          pageY = e.pageY;
    if(!pageX) {
    pageX = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
    }
    if(!pageY) {
    pageY = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
    }
    console.log("頁面X軸坐標(biāo)為:"+pageX + " "+ "頁面Y軸坐標(biāo)為:"+pageY);
});

 

理解屏幕坐標(biāo)的位置

屏幕橫坐標(biāo)screenX和垂直坐標(biāo)screenY屬性是相對于整個(gè)屏幕的。如下圖所示：

如下代碼測試：

 

EventUtil.addHandler(btn,'click',function(e){
    e = EventUtil.getEvent(e);
    console.log("屏幕X軸的坐標(biāo)為:"+e.screenX + " "+"屏幕Y軸的坐標(biāo)為:"+e.screenY);
});

 

理解鼠標(biāo)滾輪事件：

IE6首先實(shí)現(xiàn)了mousewheel事件，此后opera,chrome和safari也都實(shí)現(xiàn)了這個(gè)事件，當(dāng)用戶通過鼠標(biāo)滾輪與頁面交互，在垂 直方向上滾動(dòng)頁面時(shí)(無論向上還是向下)，就會(huì)觸發(fā)mousewheel事件，這個(gè)事件可以在任何元素上觸發(fā)，最終會(huì)冒泡到document（IE8）或 window（IE9,Opera,Chrome,Safari）對象，與mousewheel事件對應(yīng)的event對象外，還有一個(gè)屬性 wheelDelta屬性，當(dāng)用戶向前滾動(dòng)鼠標(biāo)滾輪時(shí)，wheelDelta是120的倍數(shù)，當(dāng)用戶向后滾動(dòng)鼠標(biāo)滾輪時(shí)，wheelDelta是-120 的倍數(shù)。

將mousewheel事件給頁面任何元素或document對象，即可處理鼠標(biāo)滾輪操作；如下代碼：

 

EventUtil.addHandler(btn,'mousewheel',function(e){
    e = EventUtil.getEvent(e);
    alert(e.wheelDelta);
});

 

如上代碼，我不是在document對象或者window對象上，而是在頁面btn元素上觸發(fā)的；但是我們要注意，在Opera9.5之前的版本 中，wheelDelta值的正負(fù)號是顛倒的，如果我們要支持Opera9.5版本之前的話，那么我們需要瀏覽器檢測技術(shù)來檢測下；如下代碼

 

EventUtil.addHandler(document, "mousewheel", function(event){
    event = EventUtil.getEvent(event);
    // var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
       var delta = event.wheelDelta;
    alert(delta);
});

 

但是client.engine.opera 這句代碼運(yùn)行下會(huì)報(bào)錯(cuò)，因?yàn)槟壳斑€沒有封裝這個(gè)方法，所以等下一個(gè)博客我會(huì)研究代理檢測封裝下這個(gè)方法；所以先不考慮opera9.5,先注釋掉這句代碼；

但是FireFox支持一個(gè)為DOMMouseScroll的事件，也是在鼠標(biāo)滾輪滾動(dòng)時(shí)觸發(fā)，與mousewheel事件一樣，但是他的有關(guān)鼠標(biāo) 滾輪信息保存在detail屬性中，當(dāng)鼠標(biāo)向前滾動(dòng)時(shí)，這個(gè)屬性值是-3的倍數(shù)，當(dāng)鼠標(biāo)滾輪向后滾動(dòng)時(shí)，這個(gè)屬性值是3的倍數(shù)；也可以給 DOMMouseScroll事件使用在任何元素上，且這個(gè)事件會(huì)冒泡到window對象上，因此我們可以這樣添加滾輪信息的代碼如下：

 

EventUtil.addHandler(document, "DOMMouseScroll", function(event){
    event = EventUtil.getEvent(event);
    alert(event.detail);
});

 

我們現(xiàn)在可以給跨瀏覽器下的滾輪事件；代碼如下：

 

function getWheelDelta (event) {
    if(event.wheelDelta) {
    // return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
         return  event.wheelDelta;
    }else {
        return -event.detail * 40
    }
}

 

getWheelDelta方法首先檢測了事件對象是否包含了wheelDelta屬性，如果包含則返回屬性值，如果不包含，那么我們就當(dāng)作是 firefox瀏覽器，那么假設(shè)相應(yīng)的值保存在detail屬性中，有了上面的方法后，我們現(xiàn)在可以將相同的事件指定給mousewheel事件和 DOMMouseScroll事件了；

 

EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel);
EventUtil.addHandler(document, "mousewheel", handleMouseWheel);
function handleMouseWheel(event) {
    event = EventUtil.getEvent(event);
    var delta = EventUtil.getWheelDelta(event);
    alert(delta);
}

 

滾輪向上滾動(dòng)是正數(shù)120，向下滾動(dòng)是負(fù)數(shù)-120，所以根據(jù)是否大于0，可以判斷是向下滾動(dòng)還是向上滾動(dòng)；

#p#

理解字符編碼charCode

IE9+,firefox,chrome和safari的event對象都支持一個(gè)charCode屬性，這個(gè)屬性只有在發(fā)生keypress事件 時(shí)才包含值，而且這個(gè)值是按下的那個(gè)鍵所代表字符的ASCLL編碼，但是IE8及之前或者opera不支持這個(gè)屬性，但是我們可以使用keyCode這個(gè) 屬性代替.在取得了字符編碼之后，就可以使用String.fromCharCode()將其轉(zhuǎn)換成實(shí)際的字符。

如下代碼：

 

getCharCode: function(event) {
    if(typeof event.charCode == 'number') {
        return event.charCode;
    }else {
        return event.keyCode;
    }
}

 

我們現(xiàn)在可以給EventUtil添加事件了，如下代碼：

 

var EventUtil = {
    addHandler: function(element,type,handler) {
        if(element.addEventListener) {
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent) {
            element.attachEvent("on"+type,handler);
        }else {
            element["on" +type] = handler;
        }
    },
    removeHandler: function(element,type,handler){
        if(element.removeEventListener) {
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent) {
            element.detachEvent("on"+type,handler);
        }else {
            element["on" +type] = null;
        }
    },
    getEvent: function(event) {
        return event ? event : window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event){
        if(event.preventDefault) {
            event.preventDefault();
        }else {
            event.returnValue = false;
        }
    },
    stopPropagation: function(event) {
        if(event.stopPropagation) {
            event.stopPropagation();
        }else {
            event.cancelBubble = true;
        }
    },
    getRelatedTarget: function(event){
        if (event.relatedTarget){
            return event.relatedTarget;
        } else if (event.toElement){
            return event.toElement;
        } else if (event.fromElement){
            return event.fromElement;
        } else {
            return null;
        }
    },
    getWheelDelta: function(event) {
        if(event.wheelDelta) {
            return event.wheelDelta;
        }else {
            return -event.detail * 40
        }
    },
    getCharCode: function(event) {
        if(typeof event.charCode == 'number') {
            return event.charCode;
        }else {
            return event.keyCode;
        }
    }
};

 

我們現(xiàn)在可以做一個(gè)demo如下：

 

如下代碼：
var inputp = document.getElementById("inputp");
EventUtil.addHandler(inputp,'keypress',function(event){
    event = EventUtil.getEvent(event);
    var code = EventUtil.getCharCode(event);
    alert(EventUtil.getCharCode(event)); // 彈出字符編碼
    alert(String.fromCharCode(code));  // 彈出字符
});

 

HTML5事件

1.   contextmenu事件

contextmenu事件在windows操作系統(tǒng)下，我們是使用右鍵就可以自定義右鍵彈出菜單，但是我們使用右鍵的時(shí)候會(huì)有默認(rèn)的菜單，因此我 們需要使用阻止默認(rèn)事件這個(gè)方法來阻止掉；此事件也是屬于鼠標(biāo)事件，因此此事件包含與光標(biāo)位置中所有的屬性，比如我們右鍵如下圖所示：

 

HTML代碼如下：
<p id="myp">Right click or Ctrl+click me to get a custom context menu.Click anywhere else to get the default context menu.
</p>
<ul id="myMenu" style="position:absolute;visibility:hidden;background-color:
    silver">
<li><a href="http://www.nczonline.net">Nicholas’ site</a></li>
<li><a href="http://www.wrox.com">Wrox site</a></li>
<li><a href="http://www.yahoo.com">Yahoo!</a></li>
</ul>

 

 

JS代碼如下：
var p = document.getElementById("myp");
EventUtil.addHandler(p, "contextmenu", function(event){
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
    var menu = document.getElementById("myMenu");
    menu.style.left = event.clientX + "px";
    menu.style.top = event.clientY + "px";
    menu.style.visibility = "visible";
});
EventUtil.addHandler(document, "click", function(event){
    document.getElementById("myMenu").style.visibility = "hidden";
});

 

如上，我們是通過右鍵的clientX和clientY來確定菜單的位置；當(dāng)我點(diǎn)擊文檔document的時(shí)候 就隱藏該菜單；

瀏覽器支持有：IE，F(xiàn)irefox，Safari,chrome和Opera11+

beforeunload事件

此事件是給頁面在卸載之前，給用戶一個(gè)提示，是否需要卸載頁面提示給用戶，為了顯示這個(gè)對話框，對IE和firefox而言，必須將event.returnValue的值設(shè)置為要顯示給用戶的字符串；但是對于safari和chrome而言，可以返回此字符串即可；

如下代碼：

 

EventUtil.addHandler(window, "beforeunload",function(event){
    event = EventUtil.getEvent(event);
    var message = "I'm really going to miss you if you go.";
    event.returnValue = message;
    return message;
});

 

當(dāng)用戶關(guān)閉游覽器的時(shí)候，會(huì)彈出如下窗口給用戶提示，如下：

點(diǎn)擊離開此頁按鈕 即關(guān)閉窗口，點(diǎn)擊留在此頁按鈕 即留在當(dāng)前頁面，但是當(dāng)我按F5刷新頁面的時(shí)候，同樣會(huì)彈出窗口提示，如下：

瀏覽器支持：IE，firefox，chrome和safari都支持，但是Opera11及之前的版本不支持；

理解hashchange事件

HTML5中新增加了hashchange事件，以便在URL的參數(shù)列表(url中的#號后面的所有參數(shù)發(fā)生改變時(shí)通知開發(fā)人員)，在Ajax應(yīng)用中，開發(fā)人員經(jīng)常使用url參數(shù)列表保存狀態(tài)或?qū)Ш叫畔ⅲ?/p>

我們必須把hashchange事件添加到window對象中，然后當(dāng)url參數(shù)列表只要發(fā)生變化就會(huì)調(diào)用此事件，此事件對象event包含2個(gè)屬性，oldURL和newURL，這兩個(gè)屬性分別保存著URL變化前后的完整URL；

支持的瀏覽器有：IE8+，firefox3.6+，safari5+，chrome和opera10.6+

在這些瀏覽器中，只有firefox3.6+,chrome和opera支持oldURL和newURL屬性；

如下代碼：

 

EventUtil.addHandler(window, "hashchange", function(event){
     alert("Old URL: " + event.oldURL + "\nNew URL: " + event.newURL);
});

 

當(dāng)我第一次#號參數(shù)后面是aa，現(xiàn)在改成aaaa,就會(huì)觸發(fā)此事件，如下所示：

有些瀏覽器并不支持oldURL和newURL，因此我們可以使用location.hash來保存當(dāng)前的參數(shù)列表，如下代碼：

 

EventUtil.addHandler(window, "hashchange", function(event){

      alert(location.hash);

});

 

當(dāng)#號后面我改成bbb參數(shù)時(shí)候，會(huì)彈出如下所示：

可以使用如下代碼來檢測瀏覽器是否支持hashchange事件；

 

var isSupported = ("onhashchange" in window);
alert(isSupported);

 

如果IE8 是在IE7 文檔模式下運(yùn)行，即使功能無效它也會(huì)返回true。為解決這個(gè)問題，可以使用

以下這個(gè)更穩(wěn)妥的檢測方式：

 

var isSupported = ("onhashchange" in window) && (document.documentMode === undefined || document.documentMode > 7);

 

設(shè)備事件中的—orientationchange事件

蘋果公司為移動(dòng)safari添加的orientationchange事件是能讓用戶確定何時(shí)將設(shè)備由橫向查看模式切換到縱向模式觸發(fā)的事件；此屬 性中包含三個(gè)值，0表示肖像模式；90表示向左旋轉(zhuǎn)的橫向模式（主屏幕按鈕在右側(cè)），-90表示向右旋轉(zhuǎn)的橫向模式(主屏幕按鈕在左側(cè))，如下圖所示：

只要用戶改變了設(shè)備的查看模式，就會(huì)觸發(fā)orientationchange事件，

使用IOS設(shè)備即可演示效果：代碼如下：

 

EventUtil.addHandler(window, "load", function(event){
    var p = document.getElementById("myp");
    p.innerHTML = "Current orientation is " + window.orientation;
    EventUtil.addHandler(window, "orientationchange", function(event){
        p.innerHTML = "Current orientation is " + window.orientation;
    });
});

 

理解移動(dòng)端的事件—觸摸與手勢事件

有以下幾個(gè)觸摸事件：

1. touchstart: 當(dāng)手指觸摸屏幕時(shí)觸發(fā)，即使是一個(gè)手指放在屏幕上也會(huì)觸發(fā)。
2. touchmove:當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)地觸發(fā)，這個(gè)事件發(fā)生期間，我們可以使用preventDefault()事件可以阻止?jié)L動(dòng)。
3. touchend: 當(dāng)手指從屏幕上移開時(shí)觸發(fā)。
4. touchcancel: 當(dāng)系統(tǒng)停止跟蹤觸摸時(shí)觸發(fā)。

上面幾個(gè)事件都屬于冒泡事件，我們可以對此進(jìn)行取消事件，每個(gè)觸摸的event對象都提供了在鼠標(biāo)中常見的屬性；

bubbles, cancelable,view,clientX, clientY ，screenX, screenY,detail, altKey, shiftKey, ctrlKey, metaKey,

除了常見的DoM屬性外，觸摸事件還包含下列三個(gè)用于跟蹤觸摸的屬性；

touches: 表示當(dāng)前跟蹤的觸摸操作的Touch對象數(shù)組；

targetTouches: 特定與事件目標(biāo)的Touch對象數(shù)組；

changeTouches: 表示自上次觸摸以來發(fā)生了什么改變的Touch對象數(shù)組；