我们通常把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对象的更多相关文章

  1. 浏览器端-W3School-JavaScript-HTML DOM：HTML DOM Event 对象

    ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Event 对象 1.返回顶部 1. HTML DOM Event 对象 实例 哪个鼠标按钮被点击 ...

  2. Dom EVENT对象

    Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 一:测试按键 function which ...

  3. 框架中的HTML DOM Event 对象

    js中的this上下文会因事件而转换成html dom对象. 所以就有这样获取当前触发事件的dom对象: window.event.srcElement || window.event.target; ...

  4. HTML DOM Event 对象

    var event;if (document.createEvent){event = document.createEvent("HTMLEvents");event.initE ...

  5. JavaScript学习笔记(11)——HTML DOM Event对象

    w3cshool:时间参考手册:http://www.w3school.com.cn/jsref/dom_obj_event.asp

  6. DOM中Event 对象如何使用

    DOM中Event 对象如何使用 一.总结 一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...

  7. 【前端】原生event对象和jquery event对象的区别

    标准DOM event对象转换成 jQuery event对象 $(event) jQuery event对象转换成 标准DOM event对象 event.originalEvent

  8. event 对象 小记

    event对象的属性提供了有关事件的细节并且通过event对象的方法,可以控制事件的继续传播和阻止事件的默认行为 2级DOM Events 标准定义了一个标准的事件模型  被除了IE外的所有现代浏览器 ...

  9. dom事件与event对象总结

    1 事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间.    tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的. 1.1 事件流:即事件的顺序.        事件 ...

随机推荐

  1. Python的第七天

    面向对象编程: 编程范式 编程是程序员用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程,一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓条条大路通罗马,实现一个任 ...

  2. 【学】jQuery的源码思路3——添加事件及其他

    这段添加的方法有: 各类事件函数 css() addEvent() toggle() //添加各种事件,将常用的事件名称放入数组,然后循环着加入到zQuery对象的原型上 var eventArr = ...

  3. 开发安卓应用之中兴手机与macbook pro 连接设定

    目标: 把中兴手机和macbook pro 连接在一起,实现真机调试安卓应用. 工具: 手机型号:zte v956 mac os: OS X 10 Eclipse: Android Developer ...

  4. Windows 驱动程序工具包中的头文件

    MSDN原文:https://msdn.microsoft.com/zh-cn/library/windows/hardware/ff554695(v=vs.85).aspx Windows 驱动程序 ...

  5. terminator 安装及使用

    1. 安装 $ sudo apt-get install terminator 2. 右键设置首选项 背景设置为0.8透明度, 字体挤在一起:在ubuntu下请选择mono后缀的字体就可以了 3. 使 ...

  6. 三种Singleton的实现方式

    来源:http://melin.iteye.com/blog/838258 三种Singleton的实现方式,一种是用大家熟悉的DCL,另外两种使用cas特性来实现. public class Laz ...

  7. Creating a radius based VPN with support for Windows clients

    This article discusses setting up up an integrated IPSec/L2TP VPN using Radius and integrating it wi ...

  8. iPhone与iPad在开发上的区别

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  9. （转）发布Silverlight+WCF程序到IIS后，客户端访问数据库失败的解决方案

    转自url:http://greatverve.cnblogs.com/archive/2011/11/30/silverlight-wcf-pub.html 我们在编写Silverlight程序时, ...

  10. 软件测试之loadrunner学习笔记-01事务

    loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...