我们通常把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. InstallShield打包设置相对路径

    InstallShield打包设置相对路径 在使用Installshield 打包安装文件时,添加打包文件时默认使用绝对路径,但是工程文件转移时(复制到其它位置时)编译时就会找不到安装文件,这样很不方 ...

  2. 写出形似QML的C++代码

    最开始想出的标题是<Declarative C++ GUI库>,但太标题党了.只写了两行代码,连Demo都算不上,怎么能叫库呢……后来想换掉“库”这个字,但始终找不到合适词来替换.最后还是 ...

  3. 轨迹记录App是怎样对定位轨迹进行过滤、优化和平滑处理的

    https://www.zhihu.com/question/39983016 卡尔曼滤波原理 卡尔曼滤波学习笔记 卡尔曼滤波的原理说明 http://www.cs.unc.edu/~welch/ka ...

  4. mybatis处理一对多的查询

    //查询出某个班级对应的所有老师和学生 1.使用嵌套结果 <select id="findClasses3" parameterType="int" re ...

  5. 如何在Chrome下Debug Mocha的测试

    简介 经过前两篇文章的介绍,相信读者对Mocha应该有一定的认知了,本文重点讲述如何在Chrome下Debug Mocha Test, 方便你在测试fail的时候troubleshooting. 关键 ...

  6. Blackfin DSP(八)：1D DMA与音频处理模板

    1.DMA产生的背景 在许多需要使用DSP 的场合,一般都需要大量的数据搬移工作,而如果每次数据搬移都由DSP 内核来参与完成,将大大占用DSP 内核的处理时间,从而严重影响其信号处理能力.因此,Bl ...

  7. ZYNQ学习之——MIO

    1.GPIO基础知识 Zynq7000 系列芯片有 54 个 MIO(multiuse I/O) ,它们分配在 GPIO 的 Bank0 和Bank1 隶属于 PS 部分, 这些 IO 与 PS 直接 ...

  8. ngrok 配置

    安装git 1.安装git,我安装的是2.6版本,防止会出现另一个错误,安装git所需要的依赖包 yum -y install zlib-devel openssl-devel perl hg cpi ...

  9. C#正则表达式Regex类的用法

    C#正则表达式Regex类的用法 更多2014/2/18 来源:C#学习浏览量:36891 学习标签: 正则表达式 Regex 本文导读:正则表达式的本质是使用一系列特殊字符模式,来表示某一类字符串, ...

  10. SpringMVC环境搭建 配置文件_2

    applicationContext 命名空间: 引入命名空间,这样可以在代码中使用annotation xmlns="http://www.springframework.org/sche ...