DOM中Event 对象如何使用
生活随笔
收集整理的這篇文章主要介紹了
DOM中Event 对象如何使用
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
DOM中Event 對(duì)象如何使用
一、總結(jié)
一句話總結(jié)：
?
1、將event作為參數(shù)傳遞進(jìn)來(lái)，然后就可以調(diào)用event對(duì)象的各種屬性和方法了。
<body onmousedown="whichButton(event)">
?
2、事件通常與函數(shù)結(jié)合使用，函數(shù)不會(huì)在事件發(fā)生前被執(zhí)行！
之前：
1、包括頁(yè)面事件和鍵盤(pán)鼠標(biāo)等外設(shè)的事件，就是監(jiān)聽(tīng)所有對(duì)它可能影響的操作?
2、先記住四個(gè)，onclick，onblur，onchange，onfocus
?
1、如何使用dom中event對(duì)象？
解答：將event作為參數(shù)傳遞進(jìn)來(lái)，然后就可以調(diào)用event對(duì)象的各種屬性和方法了。 <body?οnmοusedοwn="whichButton(event)"> event.button; event.clientX2、如何判斷哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊？
解答：event.button; event事件的button屬性。3、如何判斷光標(biāo)的坐標(biāo)是？
解答：event.clientX。dom中event對(duì)象的clientX和clientY屬性。?
?
二、HTML DOM Event 對(duì)象 實(shí)例
哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊？
1 <html> 2 <head> 3 <script type="text/javascript"> 4 function whichButton(event) 5 { 6 var btnNum = event.button; 7 if (btnNum==2) 8 { 9 alert("您點(diǎn)擊了鼠標(biāo)右鍵！") 10 } 11 else if(btnNum==0) 12 { 13 alert("您點(diǎn)擊了鼠標(biāo)左鍵！") 14 } 15 else if(btnNum==1) 16 { 17 alert("您點(diǎn)擊了鼠標(biāo)中鍵！"); 18 } 19 else 20 { 21 alert("您點(diǎn)擊了" + btnNum+ "號(hào)鍵，我不能確定它的名稱。"); 22 } 23 } 24 </script> 25 </head> 26 27 <body onmousedown="whichButton(event)"> 28 <p>請(qǐng)?jiān)谖臋n中點(diǎn)擊鼠標(biāo)。一個(gè)消息框會(huì)提示出您點(diǎn)擊了哪個(gè)鼠標(biāo)按鍵。</p> 29 </body> 30 31 </html>?
光標(biāo)的坐標(biāo)是？
1 <html> 2 <head> 3 <script type="text/javascript"> 4 function show_coords(event) 5 { 6 x=event.clientX 7 y=event.clientY 8 alert("X 坐標(biāo): " + x + ", Y 坐標(biāo): " + y) 9 } 10 </script> 11 </head> 12 13 <body onmousedown="show_coords(event)"> 14 15 <p>請(qǐng)?jiān)谖臋n中點(diǎn)擊。一個(gè)消息框會(huì)提示出鼠標(biāo)指針的 x 和 y 坐標(biāo)。</p> 16 17 </body> 18 </html>?
?
被按的按鍵的 unicode 是？
?
相對(duì)于屏幕，光標(biāo)的坐標(biāo)是？
?
shift 鍵被按了嗎？
?
哪個(gè)元素被點(diǎn)擊了？
?
哪個(gè)事件類型發(fā)生了？
三、Event 對(duì)象
Event 對(duì)象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤(pán)按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)。
事件通常與函數(shù)結(jié)合使用，函數(shù)不會(huì)在事件發(fā)生前被執(zhí)行！
?
四、事件句柄 (Event Handlers)
HTML 4.0 的新特性之一是能夠使 HTML 事件觸發(fā)瀏覽器中的行為，比如當(dāng)用戶點(diǎn)擊某個(gè) HTML 元素時(shí)啟動(dòng)一段 JavaScript。下面是一個(gè)屬性列表，可將之插入 HTML 標(biāo)簽以定義事件的行為。
| onabort | 圖像的加載被中斷。 |
| onblur | 元素失去焦點(diǎn)。 |
| onchange | 域的內(nèi)容被改變。 |
| onclick | 當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。 |
| ondblclick | 當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。 |
| onerror | 在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤。 |
| onfocus | 元素獲得焦點(diǎn)。 |
| onkeydown | 某個(gè)鍵盤(pán)按鍵被按下。 |
| onkeypress | 某個(gè)鍵盤(pán)按鍵被按下并松開(kāi)。 |
| onkeyup | 某個(gè)鍵盤(pán)按鍵被松開(kāi)。 |
| onload | 一張頁(yè)面或一幅圖像完成加載。 |
| onmousedown | 鼠標(biāo)按鈕被按下。 |
| onmousemove | 鼠標(biāo)被移動(dòng)。 |
| onmouseout | 鼠標(biāo)從某元素移開(kāi)。 |
| onmouseover | 鼠標(biāo)移到某元素之上。 |
| onmouseup | 鼠標(biāo)按鍵被松開(kāi)。 |
| onreset | 重置按鈕被點(diǎn)擊。 |
| onresize | 窗口或框架被重新調(diào)整大小。 |
| onselect | 文本被選中。 |
| onsubmit | 確認(rèn)按鈕被點(diǎn)擊。 |
| onunload | 用戶退出頁(yè)面。 |
五、鼠標(biāo) / 鍵盤(pán)屬性
| altKey | 返回當(dāng)事件被觸發(fā)時(shí)，"ALT" 是否被按下。 |
| button | 返回當(dāng)事件被觸發(fā)時(shí)，哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊。 |
| clientX | 返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。 |
| clientY | 返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。 |
| ctrlKey | 返回當(dāng)事件被觸發(fā)時(shí)，"CTRL" 鍵是否被按下。 |
| metaKey | 返回當(dāng)事件被觸發(fā)時(shí)，"meta" 鍵是否被按下。 |
| relatedTarget | 返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。 |
| screenX | 返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。 |
| screenY | 返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。 |
| shiftKey | 返回當(dāng)事件被觸發(fā)時(shí)，"SHIFT" 鍵是否被按下。 |
六、IE 屬性
除了上面的鼠標(biāo)/事件屬性，IE 瀏覽器還支持下面的屬性：
| cancelBubble | 如果事件句柄想阻止事件傳播到包容對(duì)象，必須把該屬性設(shè)為 true。 |
| fromElement | 對(duì)于 mouseover 和 mouseout 事件，fromElement 引用移出鼠標(biāo)的元素。 |
| keyCode | 對(duì)于 keypress 事件，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對(duì)于 keydown 和 keyup 事件，它指定了被敲擊的鍵的虛擬鍵盤(pán)碼。虛擬鍵盤(pán)碼可能和使用的鍵盤(pán)的布局相關(guān)。 |
| offsetX,offsetY | 發(fā)生事件的地點(diǎn)在事件源元素的坐標(biāo)系統(tǒng)中的 x 坐標(biāo)和 y 坐標(biāo)。 |
| returnValue | 如果設(shè)置了該屬性，它的值比事件句柄的返回值優(yōu)先級(jí)高。把這個(gè)屬性設(shè)置為 fasle，可以取消發(fā)生事件的源元素的默認(rèn)動(dòng)作。 |
| srcElement | 對(duì)于生成事件的 Window 對(duì)象、Document 對(duì)象或 Element 對(duì)象的引用。 |
| toElement | 對(duì)于 mouseover 和 mouseout 事件，該屬性引用移入鼠標(biāo)的元素。 |
| x,y | 事件發(fā)生的位置的 x 坐標(biāo)和 y 坐標(biāo)，它們相對(duì)于用CSS動(dòng)態(tài)定位的最內(nèi)層包容元素。 |
七、標(biāo)準(zhǔn) Event 屬性
下面列出了 2 級(jí) DOM 事件標(biāo)準(zhǔn)定義的屬性。
| bubbles | 返回布爾值，指示事件是否是起泡事件類型。 |
| cancelable | 返回布爾值，指示事件是否可擁可取消的默認(rèn)動(dòng)作。 |
| currentTarget | 返回其事件監(jiān)聽(tīng)器觸發(fā)該事件的元素。 |
| eventPhase | 返回事件傳播的當(dāng)前階段。 |
| target | 返回觸發(fā)此事件的元素（事件的目標(biāo)節(jié)點(diǎn)）。 |
| timeStamp | 返回事件生成的日期和時(shí)間。 |
| type | 返回當(dāng)前 Event 對(duì)象表示的事件的名稱。 |
八、標(biāo)準(zhǔn) Event 方法
下面列出了 2 級(jí) DOM 事件標(biāo)準(zhǔn)定義的方法。IE 的事件模型不支持這些方法：
| initEvent() | 初始化新創(chuàng)建的 Event 對(duì)象的屬性。 |
| preventDefault() | 通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作。 |
| stopPropagation() | 不再派發(fā)事件。 |
?
九、測(cè)試題-簡(jiǎn)答題
1、如何使用dom中event對(duì)象？
解答：將event作為參數(shù)傳遞進(jìn)來(lái)，然后就可以調(diào)用event對(duì)象的各種屬性和方法了。 <body onmousedown="whichButton(event)"> event.button; event.clientX2、如何判斷哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊？
解答：event.button; event事件的button屬性。3、如何判斷光標(biāo)的坐標(biāo)是？
解答：event.clientX。dom中event對(duì)象的clientX和clientY屬性。轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/8973576.html
總結(jié)
以上是生活随笔為你收集整理的DOM中Event 对象如何使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： vue java 使用AES 前后端加密
- 下一篇： RK3288 GMAC整理