我们通常把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. 51nod 1237 最大公约数之和 V3

    求∑1<=i<=n∑1<=j<=ngcd(i,j) % P P = 10^9 + 7 2 <= n <= 10^10 这道题,明显就是杜教筛 推一下公式: 利用∑d ...

  2. mybatis动态调用表名和字段名

    以后慢慢启用个人博客:http://www.yuanrengu.com/index.php/mybatis1021.html 一直在使用Mybatis这个ORM框架,都是使用mybatis里的一些常用 ...

  3. 由system.currentTimeMillis() 获得当前的时间

    System类代表系统,系统级的很多属性和控制方法都放置在该类的内部.该类位于java.lang包. currentTimeMillis方法 public static long currentTim ...

  4. 编写更好的jQuery代码

    这是一篇关于jQuery的文章,写到这里给初学者一些建议. 现在已经有很多文章讨论jQuery和JavaScript的性能问题,然而,在这篇文章中我计划总结一些提升速度的技巧和一些我自己的建议来改善你 ...

  5. MyEclipse中代码格式化后自动换行

    MyEclipse的默认设置里面各种坑人,怎么不方便怎么设置,用户体验差到极点.今天又遇到个问题,按下Ctrl + Shift + F 后,自动格式化后的代码原来只有一行,结果变成了3行,看着都想吐. ...

  6. spring 和 spring mvc

    spring3 http://jinnianshilongnian.iteye.com/blog/1482071 spring mvc http://jinnianshilongnian.iteye. ...

  7. json转换

    Newtonsoft.Json.JsonConvert.SerializeObject 使用上述语句,将创建的对象, 转换成json格式

  8. Boot 44b0x by uboot

    1. Creat a branch from tag v2013.10-rc4 2. Build it: make B2 Install NFS service for Ubuntu 12.04 1. ...

  9. 在MyBook Live上部署svn

    一直以来都在用svn管理源代码,美中不足的是由于svn服务器端部署在本地,无法实现在异地迁入迁出程序,因此考虑将svn服务器部署在我的MyBook Live上. 一.部署svn 1.分别执行以下2条命 ...

  10. 怎么创建一个Database快照

    How to create the database Snapshot: use mastergoif not exists (select * from sys.databases where na ...