我们通常把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. Eclipse插件安装方式及使用说明

    拷贝安装方式 1.通过ECLIPSE_HOME\plugins安装 在eclipse的主目录ECLIPSE_HOME, 比如在我的机器上安装的目录是:ECLIPSE_HOME有一个plugins的目录 ...

  2. IOS开发 strong，weak，retain，assign，copy nomatic 等的区别与作用

    strong,weak,retain,assign,copy nomatic 等的区别 copy与retain:1.copy其实是建立了一个相同的对象,而retain不是:2.copy是内容拷贝,re ...

  3. 查询01_DML锁和DDL锁的处理

    一.摘要 Oracle的手册上关于锁的分类说明如下: 1. DML锁:Date lock.执行DML时保护数据的锁.Row Lock(TX)保护特定行,Table Lock(TM)保护整个表,可以通过 ...

  4. vue.js组件

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

  5. Android 对话框(Dialog)大全 建立你自己的对话框

    Android 对话框(Dialog)大全 建立你自己的对话框 原文地址: http://www.cnblogs.com/salam/archive/2010/11/15/1877512.html A ...

  6. 基于Material Design（转载）

    SeeNewsV2新闻Android客户端 基于Material Design http://www.codesocang.com/gn/xiangmu/33630.html 直接拿来用!十大Mate ...

  7. C#播放声音的四种方法 +AxWindowsMediaPlayer的详细用法

    C#播放声音的四种方法 第一种是利用DirectX 1.安装了DirectX SDK(有9个DLL文件).这里我们只用到MicroSoft.DirectX.dll和 Microsoft.Directx ...

  8. win7、linux安装使用pip、mitmproxy

    安装pip https://pip.pypa.io/en/latest/installing.html 步骤: 下载 https://bootstrap.pypa.io/get-pip.py pyth ...

  9. Android动态加载学习笔记（一）

    前言 上周五DPAndroid小分队就第二阶段分享内容进行了讨论,结果形成了三个主题:性能优化.动态加载.内核远离.我选择的是第二项——动态加载.在目前的Android开发中,这一部分知识还是比较流行 ...

  10. C++设计模式-Flyweight享元模式

    Flyweight享元模式 作用:运用共享技术有效地支持大量细粒度的对象. 内部状态intrinsic和外部状态extrinsic: 1)Flyweight模式中,最重要的是将对象分解成intrins ...