html dom event 对象,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+ "号键，我不能确定它的名称。");

}

}

请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。

鼠标事件里面主要运用以下几种：

相对于浏览器位置

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

+"
Y坐标可视区域"+en.clientY

+"
屏幕水平坐标"+en.screenX

+"
屏幕垂直坐标"+en.screenY

+"
水平偏移"+en.offsetX

+"
垂直偏移"+en.offsetY

}