我们通常把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. Zedboard安装桌面系统ubuntu及opencv（2）

    接上一篇,下面安装opencv. 一般都是参照陆佳华那本白色封皮的<软硬件协同设计>,但是不得不说这本书实在太粗糙了,很多的细节都没有说明. 首先,在PC和这块板子的方法是一样的,所以PC ...

  2. vue.js组件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. Bugtags 创业一年总结

    出发 在经历过了多轮的 APP 开发/测试/上线/运营周期之后,我们觉得 APP Bug 反馈环节始终十分低效,我们要来改变一下这个状态.于是有了 bugtags.com. 一年 从去年六月正式立项, ...

  4. 同时使用Junit4的@Parameterized参数化测试和Spring容器

    转载:http://www.jianshu.com/p/d191fe54915f 整合Spring容器 @SpringApplicationConfiguration(classes = Applic ...

  5. Python socket超时

    #server.py import socket s=socket.socket() s.bind(('127.0.0.1',2000)) s.listen(5) while 1: cs,addres ...

  6. XF 文档 - Element Framework Doc

    配置篇 Chapter Configuration Schema篇 Chapter Schema 查询篇 Chapter Querying Data 数据更改及验证篇 Chapter Data Mod ...

  7. chadang saidui

    http://www.freehacktools.com/   wen http://www.hackyshacky.com/2013/02/Must-have-hacking-tools.html  ...

  8. 安装fast cgi

    1. 下载 在HTTPD主页,找到"mod_fcgid" 下载“mod_fcgid-2.3.9-crlf.zip” 2. 生成so文件 首先,设置APACHE2_HOME系统变量. ...

  9. bottlepy template

    bottle template usage 1 example 使用bottle模板,最简单的方法是使用template函数或view装饰器 1.1 template 函数 例子如下: from bo ...

  10. winserver2008 R2 64位 企业版 , IIS 配置运行 asp+access 网站

    新建网站,程序池由DefaultAppPool 改为 Classic .NET AppPool, 并在 高级设置中,把启用 32位应用程序  设为 true 对 access 所在目录新加 every ...