javascript
JavaScript事件使用指南
HTML5事件1.contextmenu事件 contextmenu事件在windows操作系統(tǒng)下，我們是使用右鍵就可以自定義右鍵彈出菜單，但是我們使用右鍵的時(shí)候會(huì)有默認(rèn)的菜單， 因此我們需要使用阻止默認(rèn)事件這個(gè)方法來阻止掉；此事件也是屬于鼠標(biāo)事件，因此此事件包含與光標(biāo)位置中所有的屬性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 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 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來確定菜單的位置；當(dāng)我點(diǎn)擊文檔document的時(shí)候 就隱藏該菜單； 瀏覽器支持有：IE，Firefox，Safari,chrome和Opera11+beforeunload事件 此事件是給頁面在卸載之前，給用戶一個(gè)提示，是否需要卸載頁面提示給用戶，為了顯示這個(gè)對(duì)話框，對(duì)IE和firefox而言， 必須將event.returnValue的值設(shè)置為要顯示給用戶的字符串；但是對(duì)于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中的#號(hào)后面的所有參數(shù)發(fā)生改變時(shí)通知開發(fā)人員)，在Ajax應(yīng)用中， 開發(fā)人員經(jīng)常使用url參數(shù)列表保存狀態(tài)或?qū)Ш叫畔?#xff1b; 我們必須把hashchange事件添加到window對(duì)象中，然后當(dāng)url參數(shù)列表只要發(fā)生變化就會(huì)調(diào)用此事件，此事件對(duì)象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)我第一次#號(hào)參數(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)#號(hào)后面我改成bbb參數(shù)時(shí)候 可以使用如下代碼來檢測(cè)瀏覽器是否支持hashchange事件；var isSupported = ("onhashchange" in window); alert(isSupported);如果IE8 是在IE7 文檔模式下運(yùn)行，即使功能無效它也會(huì)返回true。為解決這個(gè)問題，可以使用 以下這個(gè)更穩(wěn)妥的檢測(cè)方式：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 div = document.getElementById("myDiv");div.innerHTML = "Current orientation is " + window.orientation;EventUtil.addHandler(window, "orientationchange", function(event){div.innerHTML = "Current orientation is " + window.orientation;}); });理解移動(dòng)端的事件—觸摸與手勢(shì)事件 有以下幾個(gè)觸摸事件：touchstart: 當(dāng)手指觸摸屏幕時(shí)觸發(fā)，即使是一個(gè)手指放在屏幕上也會(huì)觸發(fā)。 touchmove:當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)地觸發(fā)，這個(gè)事件發(fā)生期間，我們可以使用preventDefault()事件可以阻止?jié)L動(dòng)。 touchend: 當(dāng)手指從屏幕上移開時(shí)觸發(fā)。 touchcancel: 當(dāng)系統(tǒng)停止跟蹤觸摸時(shí)觸發(fā)。 上面幾個(gè)事件都屬于冒泡事件，我們可以對(duì)此進(jìn)行取消事件，每個(gè)觸摸的event對(duì)象都提供了在鼠標(biāo)中常見的屬性；bubbles, cancelable,view,clientX, clientY ，screenX, screenY,detail, altKey, shiftKey, ctrlKey, metaKey, 除了常見的DoM屬性外，觸摸事件還包含下列三個(gè)用于跟蹤觸摸的屬性； touches: 表示當(dāng)前跟蹤的觸摸操作的Touch對(duì)象數(shù)組； targetTouches: 特定與事件目標(biāo)的Touch對(duì)象數(shù)組； changeTouches: 表示自上次觸摸以來發(fā)生了什么改變的Touch對(duì)象數(shù)組；
?
事件流事件流描述的是從頁面中接收事件的順序，IE和Netscape提出來差不多完全相反的事件流的概念，IE事件流是事件冒泡流，Netscape事件流是事件捕獲流。
事件冒泡IE的事件流叫做事件冒泡，即事件開始時(shí)由最具體的元素(文檔中嵌套最深的那個(gè)節(jié)點(diǎn))接收，然后逐級(jí)向上（一直到文檔）；如下代碼：
<div id = "div">? ? <span id="span">? ? ? ? <a id="aTag">事件測(cè)試</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("點(diǎn)擊的是a標(biāo)簽");}function span(e) {? ? alert("點(diǎn)擊的是span標(biāo)簽");}function div(e) {? ? alert("點(diǎn)擊的是div標(biāo)簽");}
當(dāng)單擊 “事件測(cè)試”文字后，那么click事件會(huì)按照如下順序傳播；1.先打印出：點(diǎn)擊的是a標(biāo)簽2.再打印出：點(diǎn)擊的是span標(biāo)簽3.最后打印出：點(diǎn)擊的是div標(biāo)簽4.最后肯定是document文檔。
所有現(xiàn)代瀏覽器都支持事件冒泡。
事件捕獲：事件捕獲與事件冒泡事件流正好相反的順序，事件捕獲的事件流是最外層逐級(jí)向內(nèi)傳播，也就是先document，然后逐級(jí)div標(biāo)簽 ， span標(biāo)簽 , a標(biāo)簽;
上面的JS代碼改成如下：
document.getElementById("div").addEventListener('click',div,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)瀏覽器下，事件冒泡瀏覽器都支持的。
DOM事件流DOM2級(jí)事件規(guī)定的事件流包括三個(gè)階段，分別是：事件捕獲階段，處于目標(biāo)階段和事件冒泡階段。示意圖就不畫了，具體的可以看看書。
DOM0級(jí)事件處理程序如下代碼是DOM0級(jí)事件處理程序：
var btn = document.getElementById("btn");btn.onclick = function(){? ? ?alert("Clicked");};
使用DOM0級(jí)方法指定的事件處理程序被認(rèn)為是元素的方法，處理程序是在元素的作用域進(jìn)行的，程序中this是引用的是當(dāng)前元素。
<div id="btn">btn</div>var btn = document.getElementById("btn");btn.onclick = function(){? ? alert(this.id); // 彈出btn}
單擊元素btn后，通過this.id取得元素的屬性id，還可以通過this訪問元素的任何屬性和方法，以這種方式添加的事情處理程序在事件流的冒泡階段處理。也可以刪除通過DOM0級(jí)方法指定的事件處理程序，只要將事件處理程序的屬性值設(shè)置為null即可。btn.onclick = null; // 刪除事件處理程序；
如下JS代碼改成如下：
var btn = document.getElementById("btn");btn.onclick = function(){? ? alert(this.id);}btn.onclick = null;
再單擊btn后，沒有任何反應(yīng)；DOM2級(jí)事件處理程序DOM2級(jí)事件定義了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級(jí)方法一樣，這里添加的事件處理程序也是在其依副的元素作用域中運(yùn)行，使用DOM2級(jí)添加事件處理程序的好處是可以添加多個(gè)事件處理程序，如下代碼：
var btn = document.getElementById("btn");btn.addEventListener('click',function(e){? ? alert(this.id);},false);btn.addEventListener('click',function(e){? ? alert("我是來測(cè)試的");},false);
上面的代碼被彈出2次對(duì)話框，而在DOM0級(jí)是不可以的；它永遠(yuǎn)是執(zhí)行最后一次的。
addEventListener添加的事件只能使用removeEventListener來刪除相對(duì)應(yīng)的事件，那么如上的JS不能按照上面的方式來編寫哦！需要給定義一個(gè)函數(shù)；如下：
btn.addEventListener('click',handler,false);function handler(e){? ?alert(this.id);}
可以使用如下方式對(duì)click事件刪除；如下代碼：
btn.removeEventListener(‘click’,handler);
上面的是在標(biāo)準(zhǔn)瀏覽器下處理的事件，下面我們來看看在IE下處理的事件；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級(jí)方法的的主要區(qū)別在于事件處理程序的作用域，在使用dom0級(jí)情況下，事件處理程序在其所屬元素的作用域內(nèi)運(yùn)行，在使用attachEvent()方法的情況下，事件處理程序在全局作用域下運(yùn)行，其中的this等于window。
與addEventListener一樣，attachEvent也可以注冊(cè)多個(gè)點(diǎn)擊click事件，如下代碼：
btn.attachEvent('onclick',function(e){? ? alert("1");});btn.attachEvent('onclick',function(e){? ? alert("2");});
但是與Dom方法不同的是，這些事件處理程序不是以添加他們的順序執(zhí)行，而是以相反的順序觸發(fā)，比如如上代碼，會(huì)先彈出2，然后彈出1對(duì)話框；使用attachEvent注冊(cè)的事件只能使用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ù)代碼來測(cè)試之前的代碼了，代碼改成如下所示：
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)；
事件對(duì)象：在觸發(fā)DOM上的某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對(duì)象event，這個(gè)對(duì)象中包含著所有與事件有關(guān)的信息；包括導(dǎo)致事件的元素，事件的類型以及其他與特定事件相關(guān)的信息。我們來看看dom0級(jí)和dom2級(jí)的事件對(duì)象Event；
比如如下代碼：
var btn = document.getElementById("btn");btn.onclick = function(e){? ? console.log(e);}
下面我們來看看最基本的成員的含義吧；如下：
屬性/方法類型含義bubblesBoolean事件是否冒泡cancelableBoolean是否可以取消事件的默認(rèn)行為currentTargetBoolean事件處理程序當(dāng)前正在處理事件的那個(gè)元素defaultPreventedBoolean為true 表示已經(jīng)調(diào)用了preventDefault()detailInteger與事件相關(guān)的細(xì)節(jié)信息eventPhaseInteger調(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è)方法targetElement事件的目標(biāo)typeString被觸發(fā)的事件的類型viewAbstractView與事件關(guān)聯(lián)的抽象視圖。等同于發(fā)生事件的window對(duì)象理解currentTarget與target
在事件處理程序內(nèi)部，this始終等于currentTarget值，即currentTarget是指當(dāng)前被觸發(fā)或者說正在處理事件的那個(gè)元素，而target是指當(dāng)前的目標(biāo)元素；比如如下代碼，對(duì)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}但是如果我對(duì)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上并沒有注冊(cè)事件，結(jié)果click事件就冒泡到了document.body，在那里事件才得到了處理。
理解標(biāo)準(zhǔn)瀏覽器下的事件對(duì)象與IE下的事件對(duì)象標(biāo)準(zhǔn)瀏覽器下的事件對(duì)象是event，比如btn點(diǎn)擊后；如下代碼：
var btn = document.getElementById("btn");btn.onclick = function(){? ? console.log(event); //標(biāo)準(zhǔn)瀏覽器下打印事件對(duì)象? ? console.log(event.type);//'click'}btn.onclick = function(){? ? // IE下打印的事件對(duì)象window.event? ? console.log(window.event);? ? console.log(window.event.type); // 'click'?}上面的寫法是在DOM0級(jí)上注冊(cè)事件，如果我們?cè)贒om2級(jí)上注冊(cè)事件的話，那么就會(huì)有一個(gè)事件對(duì)象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ā)注冊(cè)在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中的注冊(cè)事件。但是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對(duì)話框。理解了上面的區(qū)別后，我們現(xiàn)在可以往EventUtil對(duì)象里面添加跨瀏覽器的方法了；
跨瀏覽器的事件對(duì)象
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級(jí)事件規(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級(jí)的Image對(duì)象來實(shí)現(xiàn)，在DOM出現(xiàn)之前，開發(fā)人員經(jīng)常使用Image對(duì)象在客戶端預(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+，Firefox，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ā)；
click事件：在用戶單擊鼠標(biāo)按鈕或者按下回車鍵觸發(fā)；dblclick事件：在用戶雙擊鼠標(biāo)按鈕時(shí)被觸發(fā)；mousedown事件：在用戶按下了任意鼠標(biāo)按鈕時(shí)被觸發(fā)，不能通過鍵盤觸發(fā)這個(gè)事件。mouseenter事件：在鼠標(biāo)光標(biāo)從元素外部移動(dòng)到元素范圍之內(nèi)被觸發(fā)；這個(gè)事件不冒泡；mousemove事件：當(dāng)鼠標(biāo)指針在元素內(nèi)部移動(dòng)時(shí)重復(fù)地觸發(fā)。mouseout事件：用戶將其移入另一個(gè)元素內(nèi)被觸發(fā)。mouseover事件：鼠標(biāo)指針在元素外部，用戶將移入另一個(gè)元素的邊界時(shí)觸發(fā)，感覺和mouseenter事件類似；mouseup事件：用戶釋放鼠標(biāo)按鈕時(shí)觸發(fā)；頁面上所有的元素都支持鼠標(biāo)事件，除了mouseenter和mouseleave，所有鼠標(biāo)事件都會(huì)冒泡，也可以被取消，而取消鼠標(biāo)事件將會(huì)影響瀏覽器的默認(rèn)行為。
理解客戶區(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屬性；
對(duì)此我們可以封裝代碼如下：
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屬性是相對(duì)于整個(gè)屏幕的
如下代碼測(cè)試：
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）對(duì)象，與mousewheel事件對(duì)應(yīng)的event對(duì)象外，還有一個(gè)屬性wheelDelta屬性，當(dāng)用戶向前滾動(dòng)鼠標(biāo)滾輪時(shí)，wheelDelta是120的倍數(shù)，當(dāng)用戶向后滾動(dòng)鼠標(biāo)滾輪時(shí)，wheelDelta是-120的倍數(shù)。
將mousewheel事件給頁面任何元素或document對(duì)象，即可處理鼠標(biāo)滾輪操作；如下代碼：
EventUtil.addHandler(btn,'mousewheel',function(e){? ? e = EventUtil.getEvent(e);? ? alert(e.wheelDelta);});
如上代碼，我不是在document對(duì)象或者window對(duì)象上，而是在頁面btn元素上觸發(fā)的；但是我們要注意，在Opera9.5之前的版本中，wheelDelta值的正負(fù)號(hào)是顛倒的，如果我們要支持Opera9.5版本之前的話，那么我們需要瀏覽器檢測(cè)技術(shù)來檢測(cè)下；如下代碼
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ì)研究代理檢測(cè)封裝下這個(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對(duì)象上，因此我們可以這樣添加滾輪信息的代碼如下：
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方法首先檢測(cè)了事件對(duì)象是否包含了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)；
理解字符編碼charCode
IE9+,firefox,chrome和safari的event對(duì)象都支持一個(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 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操作系統(tǒng)下，我們是使用右鍵就可以自定義右鍵彈出菜單，但是我們使用右鍵的時(shí)候會(huì)有默認(rèn)的菜單，因此我們需要使用阻止默認(rèn)事件這個(gè)方法來阻止掉；此事件也是屬于鼠標(biāo)事件，因此此事件包含與光標(biāo)位置中所有的屬性
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 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 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來確定菜單的位置；當(dāng)我點(diǎn)擊文檔document的時(shí)候 就隱藏該菜單；
瀏覽器支持有：IE，Firefox，Safari,chrome和Opera11+
beforeunload事件
此事件是給頁面在卸載之前，給用戶一個(gè)提示，是否需要卸載頁面提示給用戶，為了顯示這個(gè)對(duì)話框，對(duì)IE和firefox而言，必須將event.returnValue的值設(shè)置為要顯示給用戶的字符串；但是對(duì)于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中的#號(hào)后面的所有參數(shù)發(fā)生改變時(shí)通知開發(fā)人員)，在Ajax應(yīng)用中，開發(fā)人員經(jīng)常使用url參數(shù)列表保存狀態(tài)或?qū)Ш叫畔?#xff1b;我們必須把hashchange事件添加到window對(duì)象中，然后當(dāng)url參數(shù)列表只要發(fā)生變化就會(huì)調(diào)用此事件，此事件對(duì)象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)我第一次#號(hào)參數(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)#號(hào)后面我改成bbb參數(shù)時(shí)候可以使用如下代碼來檢測(cè)瀏覽器是否支持hashchange事件；
var isSupported = ("onhashchange" in window);alert(isSupported);
如果IE8 是在IE7 文檔模式下運(yùn)行，即使功能無效它也會(huì)返回true。為解決這個(gè)問題，可以使用以下這個(gè)更穩(wěn)妥的檢測(cè)方式：
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 div = document.getElementById("myDiv");? ? div.innerHTML = "Current orientation is " + window.orientation;? ? EventUtil.addHandler(window, "orientationchange", function(event){? ? ? ? div.innerHTML = "Current orientation is " + window.orientation;? ? });});
理解移動(dòng)端的事件—觸摸與手勢(shì)事件有以下幾個(gè)觸摸事件：
touchstart: 當(dāng)手指觸摸屏幕時(shí)觸發(fā)，即使是一個(gè)手指放在屏幕上也會(huì)觸發(fā)。touchmove:當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)地觸發(fā)，這個(gè)事件發(fā)生期間，我們可以使用preventDefault()事件可以阻止?jié)L動(dòng)。touchend: 當(dāng)手指從屏幕上移開時(shí)觸發(fā)。touchcancel: 當(dāng)系統(tǒng)停止跟蹤觸摸時(shí)觸發(fā)。上面幾個(gè)事件都屬于冒泡事件，我們可以對(duì)此進(jìn)行取消事件，每個(gè)觸摸的event對(duì)象都提供了在鼠標(biāo)中常見的屬性；
bubbles, cancelable,view,clientX, clientY ，screenX, screenY,detail, altKey, shiftKey, ctrlKey, metaKey,除了常見的DoM屬性外，觸摸事件還包含下列三個(gè)用于跟蹤觸摸的屬性；touches: 表示當(dāng)前跟蹤的觸摸操作的Touch對(duì)象數(shù)組；targetTouches: 特定與事件目標(biāo)的Touch對(duì)象數(shù)組；changeTouches: 表示自上次觸摸以來發(fā)生了什么改變的Touch對(duì)象數(shù)組；
總結(jié)
以上是生活随笔為你收集整理的JavaScript事件使用指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 插入锁
- 下一篇： gradle idea java ssm