HTML DOM Event对象
我們通常把HTML DOM Event對象叫做Event事件
事件驅動模型
事件源：（觸發事件的元素）事件源對象是指event對象
其封裝了與事件相關的詳細信息.
當事件發生時,只能在事件函數內部訪問的對象
處理函數結束后會自動銷毀
事件流：當頁面元素觸發事件的時候,
該元素的容器以及整個頁面都會按照特定的順序響應該元素的觸發事件
事件傳播的順序叫做事件流.
事件分類：鼠標事件，鍵盤事件，表單事件，頁面事件
我這里主要列舉鼠標事件的：
1.鼠標事件：
var btnNum = event.button;
if (btnNum==2)
{
alert("您點擊了鼠標右鍵！")
}
else if(btnNum==0)
{
alert("您點擊了鼠標左鍵！")
}
else if(btnNum==1)
{
alert("您點擊了鼠標中鍵！");
}
else
{
alert("您點擊了" + btnNum+ "號鍵，我不能確定它的名稱。");
}
}
<body οnmοusedοwn="whichButton(event)">
<p>請在文檔中點擊鼠標。一個消息框會提示出您點擊了哪個鼠標按鍵。</p>
鼠標事件里面主要運用以下幾種：
相對于瀏覽器位置
event.clientX: 返回當事件被觸發時鼠標指針向對于瀏覽器頁面的水平坐標
event.clientY: 返回當事件被觸發時鼠標指針向對于瀏覽器頁面的垂直坐標
相對于屏幕位置
event.screenX: 返回事件發生時鼠標指針相對于屏幕的水平坐標
event.screenY: 返回事件發生時鼠標指針相對于屏幕的垂直坐標
相對于事件源位置
event.offsetX: 返回事件發生時鼠標指針相對于事件源的水平坐標
event.offsetY: 返回事件發生時鼠標指針相對于事件源的垂直坐標
event.layerX: 返回事件發生時鼠標指針相對于事件源的水平坐標(FIREFOX)
event.layerY: 返回事件發生時鼠標指針相對于事件源的垂直坐標(FIREFOX)
onblur 元素失去焦點
onclick 當用戶點擊某個對象時調用的事件句柄
ondblclick 當用戶雙擊某個對象時調用的事件句柄
onfocus 元素獲得焦點
onmousedown 鼠標按鈕被按下
onmousemove 鼠標被移動
onmouseout 鼠標從某元素移開
onmouseover 鼠標移到某元素之上
onmouseup 鼠標按鍵被松開
onreset 重置按鈕被點擊
2.鍵盤事件：
此事件不要求掌握，知道就行；比如：
altKey 返回當事件被觸發時，"ALT" 是否被按下。
button 返回當事件被觸發時，哪個鼠標按鈕被點擊。
事件流的分類：
*5.1 事件流的分類
冒泡型事件(Event Bubbling)
所有瀏覽器都支持,由明確的事件源到最不確定的事件源依次向上觸發.
使用代碼如下：
element.addEventListener(event, function, true);捕獲型
捕獲型事件(Event Capturing)
(IE不支持) 不確定的事件源到明確的事件源依次向下觸發.
使用代碼如下：
element.addEventListener(event, function, false);冒泡型
實例：鼠標移入的時候顯示坐標（x，y）
首先要一個空div id=“box”
#box{
width: 200px;
height: 200px;
background-color: #6ec0ff;
}設置寬高，背景色
再用JS加入下面的代碼就可以實現了
當你的鼠標在box里面移動的時候
會顯示六個值在不停變換。
box.οnmοusemοve=function(e){
var en=e||window.event;
box.innerHTML="水平"+en.clientX
+"<br>Y坐標可視區域"+en.clientY
+"<br>屏幕水平坐標"+en.screenX
+"<br>屏幕垂直坐標"+en.screenY
+"<br>水平偏移"+en.offsetX
+"<br>垂直偏移"+en.offsetY
}
轉載于:https://www.cnblogs.com/CGJSX/p/5513760.html
總結
以上是生活随笔為你收集整理的HTML DOM Event对象的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： angular.js phonecat翻
- 下一篇： base库中的BarrierClosur