现在我们已经注册了事件处理程序,对于事件我们还想更深入的了解。我们想知道事件发生时候的鼠标位置,我们想知道用户按下了哪些键。这些都是可能的,虽然这部分有很多烦人的浏览器兼容性问题。(这里可以快速查看浏览器兼容性列表)。
要读出事件的属性,必须要先能访问到事件。
浏览器兼容性
站在浏览器战争的角度看,Netscape实现了一个访问模型(后来被W3C做借鉴)和很多的事件属性,同时微软也做了同样的事情。当然这两种模型是完全不兼容的。但是就像我们再简介里面说的,如果
if (W3C/Netscape) {
use W3C/Netscape model for access and property names
} else if (Explorer) {
use Microsoft model for access and property names
}
这样是不正确的解决兼容性问题的办法,他会让一些能执行大部分代码但是没有考虑到的浏览器失去作用。所以我们得先访问一个事件然后再分别读取他的属性。
我们先来讨论访问事件的问题,事件属性会在后面讨论。
W3C/Netscape
在W3C/Netscape事件访问模型中事件会被当做一个参数传递给事件处理程序。所以如果你定义一个事件处理程序
element.onclick=doSomething;
doSomething()就会把事件当做一个参数。习惯上保存在一个e变量中,当然你可以改成任何名字:
function doSomething(e) {// e gives access to the event}
这是完全自动的,不需要其他的代码。在匿名函数中你可以这样写:
element.onclick = function (e) {alert('Event type is ' + e.type);}
微软
在微软的事件访问模型中有一个特别的属性window.event包含最后一个发生的事件。
element.onclick = doSomething;
function doSomething() {// window.event gives access to the event}
或者
element.onclick = function () {alert('Event type is ' + window.event.type);}
Event和event
注意到还有一个古老的Netscape属性window.Event。IE不认识这个,Netscape 4也会曲解他。所以写的时候一定要确保event是小写e开头的。
跨浏览器的事件访问
很幸运的是要写跨浏览器访问事件的脚本还是很简单的:
element.onclick = doSomething;
function doSomething(e) {
if (!e)
e = window.event;
// e gives access to the event in all browsers
}
如果e不存在那么就给他赋值window.event。现在e在所有浏览器里面都表示事件。
与内联式的事件处理程序合并
在内联式的注册模型中,你必须把event传递给函数:
<pre onclick="doSomething(event)">
function doSomething(e) {
alert(e.type);
}
虽然在微软模型里(window.)event是正确的属性,其他浏览器也能识别。
[转自:http://tech.ddvip.com/2010-03/1269927678148961.html]
分享到:
相关推荐
### JavaScript Event学习第六章 事件的访问 #### 知识点概述 在JavaScript开发中,事件处理是一项核心技能。理解如何有效地访问事件对象是优化用户体验、实现复杂交互的基础。本章节将详细介绍如何在不同的浏览器...
"bigevent:122个学习大事件"这个标题暗示着这是一个关于JavaScript事件处理的学习资源,可能包含一系列有关JavaScript事件和事件处理机制的实例、教程或者挑战。在前端交互设计中,事件扮演着关键角色,使得网页...
10.2.5 使用JavaScript处理事件 271 10.3 标准事件模型 273 10.3.1 事件传播 273 10.3.2 注册事件处理程序 274 10.3.3 设置对象的事件处理程序 276 10.3.4 事件的模块和类型 276 10.3.5 Event接口和对象 278 10.4 IE...
### JavaScript Event学习第七章 事件属性 #### 事件属性的重要性 JavaScript事件属性是Web开发中非常核心和基础的组成部分,它们提供了与用户交互时事件状态的相关信息。了解这些事件属性对于编写兼容不同浏览器...
2. **事件冒泡(Bubbling)和事件捕获(Capturing)**:事件从最深的节点开始向上级元素传播,这就是事件冒泡。而事件捕获则相反,从最外层元素开始向下传播。理解这两者的区别对于优化事件处理和防止不必要的处理是...
JavaScript基于原型(Prototype-based)和事件驱动(Event-driven),并且具有安全特性,避免了对用户计算机不必要的操作。 在"第一章 什么是JavaScript"中,我们了解到JavaScript是一种基于对象和事件驱动的脚本...
6. **事件冒泡和事件捕获**:事件传播有冒泡和捕获两种模式。冒泡是从最深的节点开始,逐级向上层元素传播;捕获则相反,从最外层元素开始向下层元素传播。使用`event.stopPropagation()`可以阻止事件继续冒泡,`...
在JavaScript Event学习第五章中,主要探讨了两种高级事件注册模型:W3C模型和微软模型。这两种模型都是为了解决早期Netscape事件处理方式的问题,即无法绑定多个事件处理函数。 **W3C模型** W3C DOM层面的事件规范...
- 属性访问:点表示法和方括号表示法。 5. **数组操作** - 数组方法:push、pop、shift、unshift、splice、slice、concat、indexOf、join等。 - ES6新特性:包括扩展运算符、数组解构赋值、数组的find和find...
6. **事件处理和监听**:事件源的核心是事件的发布和监听。在EventFlow中,用户可以设置监听器来响应特定事件的发生,这可能是通过Firebase的`on()`函数实现的,它可以在数据变化时触发回调函数。 7. **数据结构...
event对象在JavaScript事件处理中扮演重要角色,它携带着关于事件的信息,如事件类型、触发位置等。通过event对象,我们可以实现事件监听和响应,例如`addEventListener()`和`removeEventListener()`。 通过学习和...
在本实验项目中,我们将学习 JavaScript 事件处理的基本概念、事件处理模型、常用事件及处理方法。 一、浏览器事件及处理 浏览器事件是指在浏览器中发生的事件,如加载网页、关闭网页等。在 JavaScript 中,我们...
- `.once`:事件只触发一次。 - `.passive`:优化滚动事件性能,不会阻止滚动。 5. **按键修饰符**:对于键盘事件,Vue提供了特定的按键修饰符,如`.enter`(回车键)、`.tab`(制表键)、`.delete`(删除键和...
在事件处理程序中,可以通过`event`参数访问这个对象。 3. **事件冒泡与事件捕获**:在事件传播过程中,有冒泡和捕获两种模式。冒泡是指事件从最深的节点开始,逐级向上层节点传播。捕获则相反,从最外层节点开始向...
### JavaScript 学习笔记2:字符串与事件对象总结 #### 字符串操作方法总结 在JavaScript中,字符串是一系列字符的有序集合。JavaScript提供了一系列内置的方法来帮助我们处理字符串,这些方法可以用来检索、替换...
总的来说,这个压缩包提供了一个全面的JavaScript入门学习路径,覆盖了从基础语法到DOM操作、事件处理、时间函数以及用户交互等多个重要方面,是初学者理想的自学资源。通过深入学习和实践这些内容,你将能够掌握...
例如,`addEventListener()`用于绑定事件处理函数,`event.preventDefault()`阻止默认行为,`event.stopPropagation()`阻止事件冒泡。 3. **动画效果**:JavaScript可以创建各种动态效果,如滑动、淡入淡出、旋转等...
- 事件冒泡和事件捕获:事件处理的两种模式,决定了事件处理的顺序。 6. **DOM操作**: - DOM(文档对象模型):将HTML/CSS文档结构化为可操作的对象。 - 获取元素:通过getElementById、getElementsByClassName...
3. Event Model:事件处理API,包括事件冒泡、事件捕获和事件目标。 4. AJAX(Asynchronous JavaScript and XML):通过XMLHttpRequest对象实现异步数据交换,更新部分页面而无需重新加载整个网页。 5. Fetch API:...