JavaScript事件使用指南

jopen 9年前發布 | 21K 次閱讀 JavaScript開發 JavaScript

事件流

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

事件冒泡

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

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

JS如下：

document.getElementById("aTag").addEventListener('click',aTag);
document.getElementById("span").addEventListener('click',span);
document.getElementById("div").addEventListener('click',div);
function aTag(e) {
    alert("點擊的是a標簽");
}
function span(e) {
    alert("點擊的是span標簽");
}
function div(e) {
    alert("點擊的是div標簽");
}

當單擊 “事件測試”文字后，那么click事件會按照如下順序傳播；

1)先打印出：點擊的是a標簽

2) 再打印出：點擊的是span標簽

3) 最后打印出：點擊的是div標簽

4) 最后肯定是document文檔。

所有現代瀏覽器都支持事件冒泡。

事件捕獲：

事件捕獲與事件冒泡事件流正好相反的順序，事件捕獲的事件流是最外層逐級向內傳播，也就是先document，然后逐級div標簽， span標簽 , a標簽;

上面的JS代碼改成如下：

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

第三個參數設置為true，即為捕獲事件，默認為false；否則的話，事件流還是和上面的一樣，因為不管是在IE還是標準瀏覽器下，事件冒泡瀏覽器都支持的。

DOM事件流

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

DOM0級事件處理程序

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

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

使用DOM0級方法指定的事件處理程序被認為是元素的方法，處理程序是在元素的作用域進行的，程序中this是引用的是當前元素。

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

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

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

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

如下JS代碼改成如下：

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

再單擊btn后，沒有任何反應；

DOM2級事件處理程序

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

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

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

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

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

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

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

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

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

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

btn.removeEventListener(‘click’,handler);

上面的是在標準瀏覽器下處理的事件，下面我們來看看在IE下處理的事件；

IE事件處理的程序

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

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

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

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

與addEventListener一樣，attachEvent也可以注冊多個點擊click事件，如下代碼：

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

但是與Dom方法不同的是，這些事件處理程序不是以添加他們的順序執行，而是以相反的順序觸發，比如如上代碼，會先彈出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;
        }
    }
};

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

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

在IE或者標準瀏覽器下都會彈出1；如果我們需要移除click事件的話，我們可以使用如下代碼：

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

然后在標準瀏覽器下或者IE下點擊btn元素都沒有反應；

事件對象：

在觸發DOM上的某個事件時，會產生一個事件對象event，這個對象中包含著所有與事件有關的信息；包括導致事件的元素，事件的類型以及其他與特定事件相關的信息。我們來看看dom0級和dom2級的事件對象Event；

比如如下代碼：

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

打印如下：

JavaScript事件使用指南

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

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

理解currentTarget與target

在事件處理程序內部，this始終等于currentTarget值，即currentTarget是指當前被觸發或者說正在處理事件的那個元素，而target是指當前的目標元素；比如如下代碼，對btn按鈕觸發點擊事件，那么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觸發點擊的話，那么e.currentTarget就指向了document.body了，那么e.target 指向與 btn那個元素了，如下代碼：

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
};

現在應該能理解currentTarget與target的區別吧！currentTarget就是指被點擊的那個元素，但是target是當前點擊的目標元素，如上代碼，由于btn上并沒有注冊事件，結果click事件就冒泡到了document.body，在那里事件才得到了處理。

理解標準瀏覽器下的事件對象與IE下的事件對象

標準瀏覽器下的事件對象是event，比如btn點擊后；如下代碼：

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

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

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

理解特定事件的默認行為事件

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

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

就可以阻止頁面進行跳轉了~ 這是標準瀏覽器下處理方式，下面我們來看看IE是如何處理默認事件的；

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

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

標準瀏覽器下與IE下的事件目標的區別

標準瀏覽器下使用e.target來指定當前被點擊的目標元素，如下代碼所示：

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

IE下是使用event.srcElement來指定當前的目標元素，如下代碼：

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

理解標準瀏覽器與IE下阻止事件傳播的區別

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

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

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

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

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

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

理解了上面的區別后，我們現在可以往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;
        }
    }
};

事件類型：

DOM3級事件規定了以下幾類事件；如下：

UI事件：當用戶與頁面上的元素交互時觸發；

load事件：當頁面加載完后(包括所有圖像，所有javascript文件，css文件等外部資源)，就會觸發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);
});

當圖片加載完后，就會彈出圖片的url地址了；

如果在創建新的img元素時，可以為其指定一個事件處理程序，以便圖像加載完成后給出提示，此時，最重要的是在指定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";
});

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

同樣的功能，我們可以使用DOM0級的Image對象來實現，在DOM出現之前，開發人員經常使用Image對象在客戶端預加載圖像，如下代碼：

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+，Firefox，Opera，chrome及Safari3+都支持，以便開發開發人員確定動態加載的javascript文件是否加載完畢；比如我們動態創建script標簽后，通過load事件判斷動態創建的 script標簽是否加載完畢，代碼如下：

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);
});

焦點事件：當元素獲得或失去焦點時觸發；

有：blur：在元素失去焦點時觸發，這個事件不會冒泡，所有瀏覽器都支持。

foucs：在元素獲得焦點時觸發，這個事件不會冒泡，所有瀏覽器都支持。

鼠標事件：當用戶通過鼠標在頁面操作時觸發；

click事件：在用戶單擊鼠標按鈕或者按下回車鍵觸發；
dblclick事件：在用戶雙擊鼠標按鈕時被觸發；
mousedown事件：在用戶按下了任意鼠標按鈕時被觸發，不能通過鍵盤觸發這個事件。
mouseenter事件：在鼠標光標從元素外部移動到元素范圍之內被觸發；這個事件不冒泡；
mousemove事件：當鼠標指針在元素內部移動時重復地觸發。
mouseout事件：用戶將其移入另一個元素內被觸發。
mouseover事件：鼠標指針在元素外部，用戶將移入另一個元素的邊界時觸發，感覺和mouseenter事件類似；
mouseup事件：用戶釋放鼠標按鈕時觸發；

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

理解客戶區坐標位置

含義是：鼠標指針在可視區中的水平clientX和垂直clientY坐標；

如下圖所示：

JavaScript事件使用指南

代碼如下：

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

注意：客戶區坐標位置不包含滾動條滾動的位置，因此這個位置不代表鼠標在頁面上的位置；

理解頁面坐標位置pageX和pageY：

pageX與pageY是指頁面坐標的位置，與clientX和clientY的區別是：它包含頁面滾動條的位置，如下圖所示：

JavaScript事件使用指南

代碼如下：

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

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

但是IE8及更早的版本不支持pageX與pageY,不過我們可以使用客戶區坐標(client,clientY)和滾動坐標計算出來；因此我們需要用到document.body（混雜模式下）或 document.documentElement（標準模式下）中的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軸坐標為:"+pageX + " "+ "頁面Y軸坐標為:"+pageY);
});

理解屏幕坐標的位置

屏幕橫坐標screenX和垂直坐標screenY屬性是相對于整個屏幕的。如下圖所示：

JavaScript事件使用指南

如下代碼測試：

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

理解鼠標滾輪事件：

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

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

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

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

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 這句代碼運行下會報錯，因為目前還沒有封裝這個方法，所以等下一個博客我會研究代理檢測封裝下這個方法；所以先不考慮opera9.5,先注釋掉這句代碼；

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

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

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

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屬性，如果包含則返回屬性值，如果不包含，那么我們就當作是 firefox瀏覽器，那么假設相應的值保存在detail屬性中，有了上面的方法后，我們現在可以將相同的事件指定給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);
}

滾輪向上滾動是正數120，向下滾動是負數-120，所以根據是否大于0，可以判斷是向下滾動還是向上滾動；

理解字符編碼charCode

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

如下代碼：

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

我們現在可以給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;
        }
    }
};

我們現在可以做一個demo如下：

如下代碼：
var inputDiv = document.getElementById("inputDiv");
EventUtil.addHandler(inputDiv,'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操作系統下，我們是使用右鍵就可以自定義右鍵彈出菜單，但是我們使用右鍵的時候會有默認的菜單，因此我們需要使用阻止默認事件這個方法來阻止掉；此事件也是屬于鼠標事件，因此此事件包含與光標位置中所有的屬性，比如我們右鍵如下圖所示：

JavaScript事件使用指南

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

JS代碼如下：
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "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來確定菜單的位置；當我點擊文檔document的時候就隱藏該菜單；

瀏覽器支持有：IE，Firefox，Safari,chrome和Opera11+

beforeunload事件

此事件是給頁面在卸載之前，給用戶一個提示，是否需要卸載頁面提示給用戶，為了顯示這個對話框，對IE和firefox而言，必須將event.returnValue的值設置為要顯示給用戶的字符串；但是對于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;
});

當用戶關閉游覽器的時候，會彈出如下窗口給用戶提示，如下：

JavaScript事件使用指南

點擊離開此頁按鈕即關閉窗口，點擊留在此頁按鈕即留在當前頁面，但是當我按F5刷新頁面的時候，同樣會彈出窗口提示，如下：

JavaScript事件使用指南

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

理解hashchange事件

HTML5中新增加了hashchange事件，以便在URL的參數列表(url中的#號后面的所有參數發生改變時通知開發人員)，在Ajax應用中，開發人員經常使用url參數列表保存狀態或導航信息；

我們必須把hashchange事件添加到window對象中，然后當url參數列表只要發生變化就會調用此事件，此事件對象event包含2個屬性，oldURL和newURL，這兩個屬性分別保存著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);
});

當我第一次#號參數后面是aa，現在改成aaaa,就會觸發此事件，如下所示：

JavaScript事件使用指南

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

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

      alert(location.hash);

});

當#號后面我改成bbb參數時候，會彈出如下所示：

JavaScript事件使用指南

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

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

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

以下這個更穩妥的檢測方式：

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

設備事件中的—orientationchange事件

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

JavaScript事件使用指南

只要用戶改變了設備的查看模式，就會觸發orientationchange事件，

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

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

理解移動端的事件—觸摸與手勢事件

有以下幾個觸摸事件：

touchstart: 當手指觸摸屏幕時觸發，即使是一個手指放在屏幕上也會觸發。
touchmove:當手指在屏幕上滑動時連續地觸發，這個事件發生期間，我們可以使用preventDefault()事件可以阻止滾動。
touchend: 當手指從屏幕上移開時觸發。
touchcancel: 當系統停止跟蹤觸摸時觸發。

上面幾個事件都屬于冒泡事件，我們可以對此進行取消事件，每個觸摸的event對象都提供了在鼠標中常見的屬性；

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

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

touches: 表示當前跟蹤的觸摸操作的Touch對象數組；

targetTouches: 特定與事件目標的Touch對象數組；

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

來源：涂根華的博客

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1432093633505.html

JavaScript開發 JavaScript

JavaScript事件使用指南

事件流

事件冒泡

事件捕獲：

DOM事件流

DOM0級事件處理程序

DOM2級事件處理程序

IE事件處理的程序

事件對象：

理解currentTarget與target

理解標準瀏覽器下的事件對象與IE下的事件對象

理解特定事件的默認行為事件

標準瀏覽器下與IE下的事件目標的區別

理解標準瀏覽器與IE下阻止事件傳播的區別

跨瀏覽器的事件對象

事件類型：

理解客戶區坐標位置

理解頁面坐標位置pageX和pageY：

理解屏幕坐標的位置

理解鼠標滾輪事件：

理解字符編碼charCode

HTML5事件

理解hashchange事件

設備事件中的—orientationchange事件

理解移動端的事件—觸摸與手勢事件

相關經驗

相關資訊

相關文檔

目錄