HTML DOM Event对象
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 onmousedown="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.onmousemove=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
}
以上是关于HTML DOM Event对象的主要内容，如果未能解决你的问题，请参考以下文章