HTML DOM Event 对象
--- Event对象代表事件的状态,比如事件在其中发送的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
- 鼠标|键盘属性
1、clientX
----返回当事件被触发时候,鼠标指针相对于当前的窗口的水平坐标。
2、clientY
----返回当事件被触发时候,鼠标指针相对于当前的窗口的垂直坐标。(不考虑文档的滚动,如果事件发生在窗体的顶部,无论文档滚动了多远,clientY的值为0)
3、screenX
----返回当某个事件被触发时,鼠标指针的相对于屏幕的水平坐标。
4、screenY
----返回当某个事件被触发时,鼠标指针的相对于屏幕的垂直坐标。
5、button
----返回当事件被触发时,哪个鼠标按钮被电击。
6、shiftKey
----返回当事件被触发时,"Shift"键是否被按下。 1 代表按下 0 代表没有按
7、altKey
----返回当事件被触发时,"Alt"是否被按下。 1 代表按下 0 代表没有按
- IE属性
1、cancelBubble
----如果事件句柄想阻止事件传播到包容对象,就必须把该属性设为true
2、offsetX,offsetY
----发生事件的地点在事件源元素的坐标系统中的x坐标和y坐标。
3、returnValue
----如果设置了该属性,它的值比事件句柄的返回值优先级高。设置为false,可以取消发送事件的源元素的默认动作。
---对于生成事件的Window对象、Document对象或Element对象。
5、x,y
---事件发生的位置的x坐标和y坐标,他们相对于用CSS动态定位的最内层包容元素。
- 标准Event方法 -----2级DOM事件标准 | IE不支持
1、preventDefault()
---通知浏览器不执行与事件关联的默认动作。
2、stopPropagation()
---不在派发事件。
- 标准Event属性 -----IE不支持
1、target
---返回触发此事件的元素(事件的目标节点)
2、type
---返回当前Event对象表示的事件的名称
扩展阅读:
相关推荐
Event对象则是JavaScript事件处理中的核心,它包含了与特定事件相关的所有信息,如事件类型、事件目标等。 在深入讲解Window对象和Event对象之前,我们先了解一些基础概念。JavaScript是一种基于原型的动态类型语言...
5. **阻止默认行为**:为了避免鼠标按下时元素的默认行为(如链接跳转),需要在`mousedown`事件中调用`event.preventDefault()`。 6. **视觉反馈**:为了提供更好的用户体验,可以在拖动过程中改变元素的样式,如...
事件处理的核心在于`Event`对象,这个对象包含了与事件相关的信息,如事件类型、触发事件的元素等。下面我们将深入探讨`Event`对象的关键属性和方法,以及它们在JavaScript中的应用。 ### 1. `Event`对象的基础属性...
本文将深入探讨如何解决"Virtual-dom-event-binding-issue",即如何使虚拟DOM的事件绑定正常工作。 一、虚拟DOM的基本原理 虚拟DOM是一种轻量级的数据结构,它代表了实际DOM的结构。当状态改变时,虚拟DOM会计算出...
【Hangman-Dom-svg-event-】项目是一个基于JavaScript实现的猜词游戏,它利用DOM(文档对象模型)操作、SVG(可缩放矢量图形)技术和事件处理来创建互动的游戏体验。下面将详细讲解这个项目涉及的主要知识点。 一、...
2. 注册事件监听器:使用`waitForEvent`函数,传入需要监听的事件源(通常是DOM元素或其他具有事件接口的对象)和事件名称,它会返回一个Promise。例如: ```javascript const element = document.getElementById...
在本文中,我们将深入探讨HTML DOM Event对象以及与之相关的属性和事件句柄。 首先,Event对象是JavaScript中用于处理事件的核心组件。它包含了有关事件的各种信息,例如哪个鼠标按钮被点击、光标坐标、按键Unicode...
Window对象是DOM中的一个重要组成部分,它提供了很多方法和属性,如`alert()`用于弹出对话框,`open()`用于打开新的窗口,`location`用于获取或改变页面URL,`history`用于管理浏览历史,`screen`提供了关于用户屏幕...
在网页中,DOM(文档对象模型)是HTML和XML文档的一种结构化表示,允许我们通过编程方式访问和修改页面内容。这个压缩包"js-dom-and-events-modifying-html-readme-v-000-源码.rar"包含的源码很可能是一系列关于使用...
DOM(文档对象模型)是一个跨平台、语言无关的接口,允许程序和脚本动态地访问和更新文档的内容、结构和样式。 在本文件中,我们将学习如何使用PHP的原生DOM对象来创建、操作XML文档。原生DOM对象指的是PHP标准库中...
// 拖动开始时的操作,如设置数据传输对象dataTransfer的数据 event.dataTransfer.setData('text/plain', '这是被拖动的数据'); }); draggableElement.addEventListener('dragend', function(event) { // 拖动...
4. **event对象**:在每个键盘事件中,都会有一个`event`对象传递给事件处理函数。这个对象包含了有关事件的详细信息,如`keyCode`、`charCode`、`key`等,还可以通过`event.preventDefault()`阻止默认行为,如阻止...
1. **对象事件注入**:eventy库的独特之处在于它允许开发者将事件处理直接注入到对象上,而不是绑定到DOM元素。这使得事件处理与具体的DOM结构解耦,代码可读性和可维护性更强。 2. **模块化设计**:eventy遵循现代...
1. **DOM基础**:首先,我们需要了解DOM是什么,它是如何将HTML文档结构化为可编程的对象模型,以及如何通过JavaScript操作DOM元素。 2. **事件**:事件是用户或浏览器执行的操作,如点击按钮、滚动页面等。理解...
Vue Event Proxy 是基于Vue.js的插件,它通过创建一个全局的事件总线(Event Bus)对象,使得在应用的任何地方都可以触发或监听自定义事件。这样,即使组件之间没有直接的父子关系或者引用关系,也可以通过事件进行...