Html页面Dom对象之Event

HTML DOM Event 对象

实例

哪个鼠标按钮被点击?

光标的坐标是?

被按的按键的 unicode 是?

相对于屏幕,光标的坐标是?

shift 键被按了吗?

哪个元素被点击了?

哪个事件类型发生了?

Event 对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!

事件句柄 (Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为。

属性 此事件发生在何时...
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。

鼠标 / 键盘属性

属性 描述
altKey 返回当事件被触发时,"ALT" 是否被按下。
button 返回当事件被触发时,哪个鼠标按钮被点击。
clientX 返回当事件被触发时,鼠标指针的水平坐标。
clientY 返回当事件被触发时,鼠标指针的垂直坐标。
ctrlKey 返回当事件被触发时,"CTRL" 键是否被按下。
metaKey 返回当事件被触发时,"meta" 键是否被按下。
relatedTarget 返回与事件的目标节点相关的节点。
screenX 返回当某个事件被触发时,鼠标指针的水平坐标。
screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。
shiftKey 返回当事件被触发时,"SHIFT" 键是否被按下。

IE 属性

除了上面的鼠标/事件属性,IE 浏览器还支持下面的属性:

属性 描述
cancelBubble 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。
fromElement 对于 mouseover 和 mouseout 事件,fromElement 引用移出鼠标的元素。
keyCode 对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue 如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle,可以取消发生事件的源元素的默认动作。
srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement 对于 mouseover 和 mouseout 事件,该属性引用移入鼠标的元素。
x,y 事件发生的位置的 x 坐标和 y 坐标,它们相对于用CSS动态定位的最内层包容元素。

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

属性 描述
bubbles 返回布尔值,指示事件是否是起泡事件类型。
cancelable 返回布尔值,指示事件是否可拥可取消的默认动作。
currentTarget 返回其事件监听器触发该事件的元素。
eventPhase 返回事件传播的当前阶段。
target 返回触发此事件的元素(事件的目标节点)。
timeStamp 返回事件生成的日期和时间。
type 返回当前 Event 对象表示的事件的名称。

标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法:

方法 描述
initEvent() 初始化新创建的 Event 对象的属性。
preventDefault() 通知浏览器不要执行与事件关联的默认动作。
stopPropagation()  

Html页面Dom对象之Event

时间: 2024-10-09 22:14:41

Html页面Dom对象之Event的相关文章

Html页面Dom对象之Document

Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问. Document 对象集合 集合 描述 all[] 提供对文档中所有 HTML 元素的访问. anchors[] 返回对文档中所有 Anchor 对象的引用. applets 返回对文档中所有 Applet

JavaScript基础--DOM对象(十三):(windows对象:history\location\navigator\screen\event)

DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象模型)DOM是HTML与XML的应用编程接口(API) BOM和DOM相辅相成的关系BOM为纲,DOM为目,DOM是BOM的具体体现 3.DOM对象 3.1 Windows对象 3.1.1 confirm function test(){ var res= window.confirm("你要删除&

dom对象中的this和event.target区别

1.this是事件冒泡,动态变化.先触发内部事件,由内到外的执行. <script> function testdiv(val){ console.log(val.id); } function testa(val){ console.log(val.id); } </script> <body> <div onclick="testdiv(this)" id="testdiv"> <a href="#

前端05.js入门之BOM对象与DOM对象。

一.关于BOM对象. BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 用于操控用户浏览器. 1.window对象: 所有浏览器都支持 window 对象. 概念上讲.一个html文档对应一个window对象. 功能上讲: 控制浏览器窗口的. 使用上讲: window对象不需要创建对象,直接使用即可. 下面是window对象的常用方法: alert()            显示带有一段消息和一

WebKit JavaScript Binding添加新DOM对象的三种方式

一.基础知识 首先WebKit IDL并非完全遵循Web IDL,只是借鉴使用.WebKit官网提供了一份说明(WebKitIDL),比如Web IDL称"operation”(操作), 而WebKitIDL称为"method"(方法), 另外Web IDL也不像WebKitIDL那样将属性和参数分开. 为JavaScript绑定对象,可以使用module来定义所从属的模组. 典型的module包括: core, window, event, traversal, range

js之DOM对象一

js之DOM对象一 一.什么是HTML  DOM HTML  Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树) 二.DOM树 画dom树是为了展示文档中各个对象之间的关系,用于对象的导航. 三.DOM节点 1.节点类型 HTML 文档中的每个成分都是一个节点. DOM 是这样规定的:    整个文档是一个文档节点     每个 HTML 标签是一个

jQuery对象与DOM对象转换

原文链接 http://www.cnblogs.com/ouyangping/p/6439939.html jQuery对象与DOM对象是不一样的 通过一个简单的例子,简单区分下jQuery对象与DOM对象: <p id="imooc"></p> 我们要获取页面上这个id为imooc的div元素,然后给这个文本节点增加一段文字:"hello,world",并且让文字颜色变成红色. 通过标准JavaScript处理: var p = docum

jQuery基础(样式篇,DOM对象,选择器,属性样式)

1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用. $(document).ready(function() {   内容  }); 1.jQuery对象与DOM对象   jQuery对象与DOM对象是不一样的 普通处理,通过标准JavaScript处理: var p = document.getElementById

锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)

1.jQuery对象就是通过jQuery包装DOM对象后产生的对象. 2.jQuery对象和DOM对象的相互转换. 良好的书写风格: var $input=$("input") jQuery获取的对象在变量前面加上$. <1>jQUery对象转成DOM对象,两种方法:[index]和get(index) a:var $cr=$("#cr")    //jQuery对象 var cr=$cr[0]    //DOM对象 b:var $cr=$("