引用
Event属性和方法:
1. type:事件的类型,如onlick中的click;
2. srcElement/target:事件源,就是发生事件的元素;
3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下;(firefox中 0代表左键,1代表中间键,2代表右键)
4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置;(在DOM标准中,这两个属性值都不考虑文档的滚动情况,也就是说,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是 0,所以在IE中,要想得到事件发生的坐标相对于文档开头的位置,要加上
document.body.scrollLeft和 document.body.scrollTop)
5. offsetX,offsetY/layerX,layerY:事件发生的时候,鼠标相对于源元素左上角的位置;
6. x,y/pageX,pageY:检索相对于父要素鼠标水平坐标的整数;
7. altKey,ctrlKey,shiftKey等:返回一个布尔值;
8. keyCode:返回keydown何keyup事件发生的时候按键的代码,以及keypress 事件的Unicode字符;(firefox2不支持 event.keycode,可以用 event.which替代 )
9. fromElement,toElement:前者是指代mouseover事件中鼠标移动过的文档元素,后者指代mouseout事件中鼠标移动到的文档元素;
10. cancelBubble:一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到包容层次的元素;(e.cancelBubble = true; 相当于 e.stopPropagation();)
11. returnValue:一个布尔属性,设置为false的时候可以组织浏览器执行默认的事件动作;(e.returnValue = false; 相当于 e.preventDefault();)
12. attachEvent(),detachEvent()/addEventListener(),removeEventListener:为制定DOM对象事件类型注册多个事件处理函数的方法,它们有两个参数,第一个是事件类型,第二个是事件处理函数。在
attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素;
13. screenX、screenY:鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要;
一些说明:
1. event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等;
2. event对象只在事件发生的过程中才有效。
firefox里的event跟IE里的不同,IE里的是全局变量,随时可用;firefox里的要用参数引导才能用,是运行时的临时变量。
在IE/Opera中是window.event,在Firefox中是event;而事件的对象,在IE中是window.event.srcElement,在Firefox中是event.target,Opera中两者都可用。
3. 下面两句效果相同
var evt = (evt) ? evt : ((window.event) ? window.event : null);
var evt = evt || window.event; // firefox下window.event为null, IE下event为null
4. IE中事件的起泡
IE中事件可以沿着包容层次一点点起泡到上层,也就是说,下层的DOM节点定义的事件处理函数,到了上层的节点如果还有和下层相同事件类型的事件处理函数,那么上层的事件处理函数也会执行。例如, div 标签包含了 a ,如果这两个标签都有onclick事件的处理函数,那么执行的情况就是先执行标签 a 的onclick事件处理函数,再执行 div 的事件处理函数。如果希望的事件处理函数执行完毕之后,不希望执行上层的 div 的onclick的事件处理函数了,那么就把cancelBubble设置为true即可。
分享到:
相关推荐
在JavaScript编程语言中,`window.event`对象是一个特殊对象,它与浏览器的事件处理机制紧密相关。这个对象在大部分浏览器环境中(尤其是老版本的IE)是全局可用的,提供了当前事件的相关信息。本文将深入探讨`...
命令查询职责分离)扩展模块,它集成了EventStore的Node.js客户端,使得开发者能够轻松地在NestJS应用中引入事件溯源(Event Sourcing)的概念。事件溯源是一种持久化数据的方式,它记录了系统中所有事件的历史,而...
当用户在历史记录中导航时,该事件会被触发,其事件对象`event.state`可以返回之前存储的JSON数据。 6. **HTML5 History API**: HTML5引入了History API,允许开发者更精细地控制浏览历史。`history.pushState()`...
微任务通常涉及Promise的`then`回调、`process.nextTick`(在Node.js中)等,它们在当前宏任务的末尾,但在下一个宏任务开始前执行。 以一个例子来说明:当遇到`setTimeout`和`Promise`时,`setTimeout`的回调被放...
"simplecalendar.js"是一款轻量级、易用且功能丰富的JavaScript日历插件,专为开发者设计,用于快速集成到各种Web应用中,实现事件记录与展示的功能。本文将深入探讨其核心特点、使用方法以及如何自定义和扩展。 一...
3. `window.history`:允许用户在浏览器的历史记录中前进或后退。 4. `window.navigator`:包含有关用户浏览器的信息。 5. `window.alert()`, `window.confirm()`, `window.prompt()`:提供与用户的交互,显示警告、...
js中onchange事件是在客户端改变输入控件的值,比如一个textbox,会出发的一个事件。但是如果在js代码中改变一个textbox的value,而不是通过键盘输入改变一个...同理,js中使用fireEvent方法还可以触发其他的空间事件。
`event.originalEvent`是一个引用,指向原生的JavaScript事件对象,这样可以访问到JS中所有的事件属性。JQ还添加了一些自己的属性,如`event.buttons`来获取鼠标按钮的状态,以及`event.handleObj`记录事件绑定的...
5. **调试工具**:ui-event-observer可能包含一些用于调试和性能分析的工具,如日志记录、性能指标收集、可视化面板等,帮助开发者优化事件处理逻辑。 6. **模块化和插件系统**:作为Node.js库,ui-event-observer...
【标题】中的“JS实现收入消费记录工具代码”表明这是一个使用JavaScript编程语言开发的应用程序,其功能主要是帮助用户记录和管理他们的收入与消费情况。在前端开发领域,JavaScript是构建交互式网页应用的关键技术...
JavaScript中的Event对象是处理事件的核心,它包含了与事件相关的各种信息,如事件源、按键状态、鼠标位置等。Event对象是在事件发生时由浏览器自动创建的,它在事件发生期间有效,之后会被销毁。理解并熟练运用...
`event`对象是JavaScript事件处理中的核心组成部分,它包含了与特定事件相关的各种信息。`event`对象在事件发生时自动创建,并作为参数传递给事件处理函数。例如,当你点击一个按钮或者移动鼠标时,`event`对象会...
模拟服务器,它在文件中重放 EventStream 记录。 用法 首先记录服务器发送的事件流: curl http://URL.OF.THE/STREAM > stream.txt 然后开始: replay-event-stream stream.txt 你可以只使用...
JavaScript日程记录效果是网页应用中常见的一种功能,它允许用户在特定的时间点安排和记录事件,类似于电子日历。这种效果通常通过JavaScript库或框架实现,以提供交互性和跨平台兼容性。在这个案例中,我们关注的是...
three.js是一个基于WebGL的JavaScript库,它使得在浏览器中创建3D图形变得容易。结合OrbitControls.js,我们可以实现对场景中的对象进行平移、缩放和旋转的交互控制。 首先,`index.html`是网页的主文件,它包含了...
标签“js outlook dayview event”表明这是一个结合了JavaScript、日视图和事件管理的项目。对于开发这样一个功能丰富的日历视图,理解JavaScript的DOM操作、事件处理和动画效果是至关重要的。同时,良好的代码组织...
EventLogger 是一个网站,可让您记录生活中的不同事件。 它目前仅针对伊朗用户。 这主要是在2014 年使用Python 、 Django 、 Bootstrap和jQuery编写的。 安装 1. virtualenv / virtualenvwrapper 你应该已经知道...
在IT领域,尤其是在数据分析、用户行为分析或者软件测试中,记录和分析用户的鼠标轨迹是一项重要的任务。本项目涉及的技术点主要包括“鼠标轨迹记录”、“坐标还原”以及“JavaScript操作Access数据库”。下面将对...
event_listener.jsx PS事件监听脚本 1、修改脚本监听数据本地化语言显示 ---0.02-01 2、函数增加注释当前历史记录名称 ---0.02-02 https://blog.csdn.net/greless/article/details/105811358
在本话题中,我们主要关注的是如何使用JavaScript来实现轨迹跟踪,即记录并展示用户的鼠标点击过的坐标点,甚至可以形成动画轨迹,以增强用户体验和数据分析。 首先,我们需要理解JavaScript事件监听机制。在网页中...