HTML DOM Event 对象
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 对象相关推荐
- HTML DOM Event对象
我们通常把HTML DOM Event对象叫做Event事件 事件驱动模型 事件源:(触发事件的元素)事件源对象是指event对象 其封装了与事件相关的详细信息. 当事件发生时,只能在事件函数内部访问 ...
- HTML DOM教程 21-HTML DOM Event 对象
HTML DOM教程 21-HTML DOM Event 对象 1:Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与 ...
- html dom对象常用事件,HTML Dom Event对象onkeydown事件
语法: οnkeydοwn="SomeJavaScriptCode" onkeydown 事件会在用户按下一个键盘按键时发生, ie浏览器使用event.keyCode获取被按下的 ...
- html dom event,HTML Dom Event对象onmouseup事件
事件会在鼠标按键被松开时发生 支持该事件的 HTML 标签: , , , , , , , , , , , , , , , , , , ,, to , , , , , , , , , , , , , , ...
- html onfoucs状态事件,HTML Dom Event对象onfocus事件
语法: οnfοcus="SomeJavaScriptCode" onfocus 事件在对象获得焦点时发生. 支持该事件的 HTML 标签: , , , , , , , , , , ...
- DOM中Event 对象如何使用
DOM中Event 对象如何使用 一.总结 一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...
- JS-图片其他事件-Event对象-事件委托-DOM对象
JS-图片其他事件-Event对象-事件委托-DOM对象 1 回顾 1. 事件回调函数中 this 的指向2. 鼠标事件click dblclick contextmenumouseenter mou ...
- 前端:JS/28/CSS DOM动态样式(style对象,style 对象属性与CSS属性的转换),Event DOM,事件对象简介(DOM和IE中的Event对象),实例:点出满天小星星
CSS DOM动态样式 使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
- jQuery Event对象的属性和方法
介绍之前先介绍jQuery的一个方法 jQuery.event.fix(event || window.event); 此方法个浏览器的event对象转换为 jQuery.event; 如果您的事件是 ...
最新文章
- php 刀客友朋,数组与数组函数学习心得
- python过去日期_利用python获取当前日期前后N天或N月日期的方法示例
- linux 哪个进程在使用串口_Linux内核的整体架构
- How to test function module CRM_TERRMAN_BUILD_TERRATTRIB_B
- 计算机控制系统的稳态误差,计算机控制系统的稳态误差
- python if elif else_python:通讯录(字典+while+if/else)
- 前端开发工程师和美工 知识需求的区别
- 器件旋转45度_【速评3+1】第十一期:朱雨玲45,日版CL,Rakza Z,国变等
- 【转】vue双向绑定原理分析
- java代码实现一个月内不再提醒,通用到期问题
- write和read返回值详解
- 在小县城做什么生意好?
- u盘无响应+开启什么服务器,服务没有及时响应启动或控制请求怎么办?如何解决系统服务没有及时响应启动...
- kindeditor-4.1.10在线编辑器的使用
- 从冬奥看中国科技(四):“一鱼多吃”的5G
- 吴恩达机器学习ex2-logistic regression python版
- 怎么搭建一个C语言的开发环境?
- 【兄弟连】二、Linux系统安装
- (暂缓通过)机器人工程ROS方向应用型本科毕业设计重点课题学生验收成果
- 【数学】复数的物理意义是什么?
热门文章
- 【Android Gradle 插件】ProductFlavor 配置 ( ProductFlavor#manifestPlaceholders 清单文件占位符配置 )
- 【数字信号处理】线性时不变系统 LTI “ 输入 “ 与 “ 输出 “ 之间的关系 ( 线性卷积起点定理 | 左边序列概念 | 推理 )
- 【错误记录】Android Studio 向 GitHub 提交代码报错 ( Push failed: Failed with error: Could not read from remote )
- 【Google Play】APK 扩展包 ( 2021年09月02日最新处理方案 | 扩展文件名格式 | 扩展文件下载存放地址 )
- 【运筹学】表上作业法 ( 最优解判别 | 初始基可行解 | 运费修改可行性方案 | 闭回路法 )
- 【Android 异步操作】线程池 ( 线程池简介 | 线程池初始化方法 | 线程池种类 | AsyncTask 使用线程池示例 )
- 八大排序算法的python实现(四)快速排序
- 设置JAVA环境变量
- How to debug Custom Action DLL
- JavaScript对象的几种创建方式?