<input type="button" value="按鈕" onclick="alert('Lee');" />//注意單雙引號(hào)腳本模型
var input = document.getElementsByTagName('input')[0];//得到input對(duì)象input.onclick = function () {//匿名函數(shù)執(zhí)行 alert('Lee');};事件對(duì)象
事件對(duì)象，我們一般稱作為event對(duì)象，這個(gè)對(duì)象是瀏覽器通過(guò)函數(shù)把這個(gè)對(duì)象作為參數(shù)傳遞過(guò)來(lái)的。input.onclick = function (evt) { var e = evt || window.event;//實(shí)現(xiàn)跨瀏覽器兼容獲取event對(duì)象 alert(e);};直接接收event對(duì)象，是W3C的做法，早期IE不支持，IE自己定義了一個(gè)event對(duì)象，直接在window.event獲取即可鼠標(biāo)事件
通過(guò)鼠標(biāo)事件對(duì)象可以獲取到鼠標(biāo)按鈕信息和屏幕坐標(biāo)獲取等可視區(qū)及屏幕坐標(biāo)
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div style="width:300px;margin-left:100px;height:300px;background-color: red"></div></body><script type="text/javascript"> document.getElementsByTagName("div")[0].onclick = function (evt) { var e = evt || window.event; console.log(e.clientX + ',' + e.clientY); console.log(e.screenX + ',' + e.screenY); console.log(e.offsetX + ',' + e.offsetY); console.log(e.pageX + ',' + e.pageY); };</script></html>鍵盤事件
鍵碼
在發(fā)生keydown和keyup事件時(shí)，event對(duì)象的keyCode屬性中會(huì)包含一個(gè)代碼，與鍵盤上一個(gè)特定的鍵對(duì)應(yīng)。對(duì)數(shù)字字母字符集，keyCode屬性的值與ASCII碼中對(duì)應(yīng)小寫字母或數(shù)字的編碼相同。字母中大小寫不影響。<script type="text/Javascript"> document.onkeydown = function (evt) { console.log(evt.keyCode);//按任意鍵，得到相應(yīng)的keyCode };</script>不同的瀏覽器在keydown和keyup事件中，會(huì)有一些特殊的情況：在Firefox和Opera中，分號(hào)鍵時(shí)keyCode值為59，也就是ASCII中分號(hào)的編碼；而IE和Safari返回186，即鍵盤中按鍵的鍵碼。字符編碼
Firefox、Chrome和Safari的event對(duì)象都支持一個(gè)charCode屬性，這個(gè)屬性只有在發(fā)生keyPRess事件時(shí)才包含值，而且這個(gè)值是按下的那個(gè)鍵所代表字符的ASCII編碼。此時(shí)的keyCode通常等于0或者也可能等于所按鍵的編碼。IE和Opera則是在keyCode中保存字符的ASCII編碼。function getCharCode(evt) { var e = evt || window.event; if (typeof e.charCode == 'number') { return e.charCode; } else { return e.keyCode; }}PS：可以使用String.fromCharCode()將ASCII編碼轉(zhuǎn)換成實(shí)際的字符。W3C與IE事件模型
事件對(duì)象屬性
function getTarget(evt) { var e = evt || window.event; return e.target || e.srcElement;//兼容得到事件目標(biāo)DOM對(duì)象}document.onclick = function (evt) { var target = getTarget(evt); alert(target);};target和currentTarget的區(qū)別
currentTarget始終是監(jiān)聽(tīng)事件者，而target是事件的真正發(fā)出者<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="outdiv" style="width:300px;margin-left:100px;height:300px;background-color: red"> <div id="indiv" style="width:100px;height: 100px;background-color: blue;"></div> </div></body><script type="text/javascript"> document.getElementById("outdiv").onclick = function (evt) { var e = evt || window.event; console.log(e.currentTarget); console.log(e.target); };</script></html>
藍(lán)色框表示點(diǎn)擊藍(lán)色區(qū)域時(shí)的輸出，紅色框表示點(diǎn)擊紅色區(qū)域時(shí)的輸出。事件流
事件流是描述的從頁(yè)面接受事件的順序，當(dāng)幾個(gè)都具有事件的元素層疊在一起的時(shí)候，那么你點(diǎn)擊其中一個(gè)元素，并不是只有當(dāng)前被點(diǎn)擊的元素會(huì)觸發(fā)事件，而層疊在你點(diǎn)擊范圍的所有元素都會(huì)觸發(fā)事件。事件流包括兩種模式：冒泡和捕獲。事件冒泡，是從里往外逐個(gè)觸發(fā)。事件捕獲，是從外往里逐個(gè)觸發(fā)。那么現(xiàn)代的瀏覽器默認(rèn)情況下都是冒泡模型，而捕獲模式則是早期的Netscape默認(rèn)情況。而現(xiàn)在的瀏覽器要使用DOM2級(jí)模型的事件綁定機(jī)制才能手動(dòng)定義事件流模式。
在阻止冒泡的過(guò)程中，W3C和IE采用的不同的方法，那么我們必須做一下兼容。function stopPro(evt) { var e = evt || window.event; window.event ? e.cancelBubble = true : e.stopPropagation(); }事件綁定
傳統(tǒng)事件綁定的問(wèn)題
前面定義的事件函數(shù)會(huì)被后面定義的事件函數(shù)覆蓋window.onload = function () {//第一組程序項(xiàng)目或第一個(gè)JS文件 alert('Lee');};window.onload = function () {//第二組程序項(xiàng)目或第二個(gè)JS文件,會(huì)覆蓋上面的函數(shù) alert('Mr.Lee');};解決覆蓋問(wèn)題<script type="text/javascript"> function addEvent(obj, type, fn) {//取代傳統(tǒng)事件處理函數(shù) var saved = null;//保存每次觸發(fā)的事件處理函數(shù) if (typeof obj['on' + type] == 'function') {//判斷是不是事件 saved = obj['on' + type];//如果有，保存起來(lái) } obj['on' + type] = function () { if (saved) saved();//執(zhí)行上一個(gè) fn.call(this);//執(zhí)行函數(shù)，把this傳遞過(guò)去 }; } var box = document.getElementById("outdiv"); addEvent(box,"click",function(){ console.log("fun1"); }); addEvent(box,"click",function(){ console.log("fun2"); }); addEvent(box,"click",function(){ console.log("fun3"); });</script>W3C事件處理函數(shù)
“DOM2級(jí)事件”定義了兩個(gè)方法，用于添加事件和刪除事件處理程序的操作：addEventListener()和removeEventListener()。所有DOM節(jié)點(diǎn)中都包含這兩個(gè)方法，并且它們都接受3個(gè)參數(shù)；事件名、函數(shù)、冒泡或捕獲的布爾值(true表示捕獲，false表示冒泡)。window.addEventListener('load', function () { alert('Lee');}, false);window.addEventListener('load', function () { alert('Mr.Lee');}, false);W3C的現(xiàn)代事件綁定比我們自定義的好處就是：1.不需要自定義了；2.可以屏蔽相同的函數(shù)；3.可以設(shè)置冒泡和捕獲。window.addEventListener('load', init, false);//第一次執(zhí)行了window.addEventListener('load', init, false);//第二次被屏蔽了IE事件處理函數(shù)
IE實(shí)現(xiàn)了與DOM中類似的兩個(gè)方法：attachEvent()和detachEvent()。這兩個(gè)方法接受相同的參數(shù)：事件名稱和函數(shù)。在使用這兩組函數(shù)的時(shí)候，先把區(qū)別說(shuō)一下：1.IE不支持捕獲，只支持冒泡；2.IE添加事件不能屏蔽重復(fù)的函數(shù)；3.IE中的this指向的是window而不是DOM對(duì)象。4.在傳統(tǒng)事件上，IE是無(wú)法接受到event對(duì)象的，但使用了attchEvent()卻可以，但有些區(qū)別。函數(shù)重復(fù)問(wèn)題<script type="text/javascript"> var box = document.getElementById("outdiv"); box.attachEvent('onclick', init); box.attachEvent('onclick', init); function init(){ alert("init") }</script>this問(wèn)題<script type="text/javascript"> var box = document.getElementById("outdiv"); box.attachEvent('onclick', function () { alert(this === window);//this指向的window }); box.attachEvent('onclick', function () { toBlue.call(box);//可以把this直接call過(guò)去 });</script>event對(duì)象傳參<script type="text/javascript"> var box = document.getElementById("outdiv"); box.onclick = function (evt) { alert(evt);//undefined }; //定義了傳統(tǒng)事件后，還可以繼續(xù)綁定事件，不會(huì)覆蓋 box.attachEvent('onclick', function (evt) { alert(evt);//object alert(evt.type);//click });</script>PS：IE中的事件綁定函數(shù)attachEvent()和detachEvent()可能在實(shí)踐中不去使用，有幾個(gè)原因：1.IE9就將全面支持W3C中的事件綁定函數(shù)；2.IE的事件綁定函數(shù)無(wú)法傳遞this；3.IE的事件綁定函數(shù)不支持捕獲；4.同一個(gè)函數(shù)注冊(cè)綁定后，沒(méi)有屏蔽掉；5.有內(nèi)存泄漏的問(wèn)題。至于怎么替代，我們將在以后的項(xiàng)目課程中探討。事件對(duì)象的其他補(bǔ)充
relatedTarget屬性
在W3C提供了一個(gè)屬性：relatedTarget；這個(gè)屬性可以在mouSEOver和mouseout事件中獲取從哪里移入和從哪里移出的DOM對(duì)象。<script type="text/javascript"> var box = document.getElementById("indiv"); box.onmouseover = function (evt) {//鼠標(biāo)移入box console.log(evt.relatedTarget);//獲取移入box最近的那個(gè)元素對(duì)象 } box.onmouseout = function (evt) {//鼠標(biāo)移出box console.log(evt.relatedTarget);//獲取移出box最近的那個(gè)元素對(duì)象 }</script>IE提供了兩組分別用于移入移出的屬性：fromElement和toElement，分別對(duì)應(yīng)mouseover和mouseout。<script type="text/javascript"> var box = document.getElementById("indiv"); box.onmouseover = function (evt) {//鼠標(biāo)移入box console.log(window.event.fromElement.tagName);//獲取移入box最近的那個(gè)元素對(duì)象span } box.onmouseout = function (evt) {//鼠標(biāo)移入box console.log(window.event.toElement.tagName);//獲取移入box最近的那個(gè)元素對(duì)象span }</script>組織瀏覽器默認(rèn)行為
<script type="text/javascript"> link.onclick = function () { alert('Lee'); return false;//直接給個(gè)假，就不會(huì)跳轉(zhuǎn)了。 }; link.onclick = function (evt) { evt.preventDefault();//W3C，阻止默認(rèn)行為，放哪里都可以 alert('Lee'); }; link.onclick = function (evt) { //IE，阻止默認(rèn)行為 window.event.returnValue = false; alert('Lee'); };</script>阻止右鍵菜單
<script type="text/javascript"> document.addEventListener("contextmenu",function(event){ event.preventDefault(); console.log("hehe"); },false);</script>卸載前事件：beforeunload
用beforeunload事件，在某些瀏覽器上（chrome、ie、firefox）可以監(jiān)聽(tīng)到瀏覽器關(guān)閉操作，能夠在關(guān)閉之前，彈出一個(gè)對(duì)話框，讓用戶選擇是否關(guān)閉<script type="text/javascript"> window.addEventListener("beforeunload", function (e) { var confirmationMessage = '確定離開(kāi)此頁(yè)嗎？本頁(yè)不需要刷新或后退'; (e || window.event).returnValue = confirmationMessage; // Gecko and Trident return confirmationMessage;// Gecko and WebKit });</script>
新聞熱點(diǎn)
疑難解答
圖片精選
