`

JavaScript Event学习:事件的访问

 
阅读更多

 

现在我们已经注册了事件处理程序,对于事件我们还想更深入的了解。我们想知道事件发生时候的鼠标位置,我们想知道用户按下了哪些键。这些都是可能的,虽然这部分有很多烦人的浏览器兼容性问题。(这里可以快速查看浏览器兼容性列表)。

  要读出事件的属性,必须要先能访问到事件。

  浏览器兼容性

  站在浏览器战争的角度看,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 Event学习第六章 事件的访问 #### 知识点概述 在JavaScript开发中,事件处理是一项核心技能。理解如何有效地访问事件对象是优化用户体验、实现复杂交互的基础。本章节将详细介绍如何在不同的浏览器...

    bigevent:122个学习大事件

    "bigevent:122个学习大事件"这个标题暗示着这是一个关于JavaScript事件处理的学习资源,可能包含一系列有关JavaScript事件和事件处理机制的实例、教程或者挑战。在前端交互设计中,事件扮演着关键角色,使得网页...

    javascript完全学习手册1 源码

    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完全学习手册2 源码

    10.2.5 使用JavaScript处理事件 10.3 标准事件模型 10.3.1 事件传播 10.3.2 注册事件处理程序 10.3.3 设置对象的事件处理程序 10.3.4 事件的模块和类型 10.3.5 Event接口和对象 10.4 IE事件模型 ...

    JavaScript Event学习第七章 事件属性

    ### JavaScript Event学习第七章 事件属性 #### 事件属性的重要性 JavaScript事件属性是Web开发中非常核心和基础的组成部分,它们提供了与用户交互时事件状态的相关信息。了解这些事件属性对于编写兼容不同浏览器...

    javascript学习视频

    2. **事件冒泡(Bubbling)和事件捕获(Capturing)**:事件从最深的节点开始向上级元素传播,这就是事件冒泡。而事件捕获则相反,从最外层元素开始向下传播。理解这两者的区别对于优化事件处理和防止不必要的处理是...

    javascript基础学习资料(doc)

    JavaScript基于原型(Prototype-based)和事件驱动(Event-driven),并且具有安全特性,避免了对用户计算机不必要的操作。 在"第一章 什么是JavaScript"中,我们了解到JavaScript是一种基于对象和事件驱动的脚本...

    javascript常用事件应用

    6. **事件冒泡和事件捕获**:事件传播有冒泡和捕获两种模式。冒泡是从最深的节点开始,逐级向上层元素传播;捕获则相反,从最外层元素开始向下层元素传播。使用`event.stopPropagation()`可以阻止事件继续冒泡,`...

    JavaScript Event学习第五章 高级事件注册模型

    在JavaScript Event学习第五章中,主要探讨了两种高级事件注册模型:W3C模型和微软模型。这两种模型都是为了解决早期Netscape事件处理方式的问题,即无法绑定多个事件处理函数。 **W3C模型** W3C DOM层面的事件规范...

    javascript实例自学手册:486个实例电子版(包括例子)

    - 属性访问:点表示法和方括号表示法。 5. **数组操作** - 数组方法:push、pop、shift、unshift、splice、slice、concat、indexOf、join等。 - ES6新特性:包括扩展运算符、数组解构赋值、数组的find和find...

    EventFlow:具有多个贡献者的基于 firebase 的事件源

    6. **事件处理和监听**:事件源的核心是事件的发布和监听。在EventFlow中,用户可以设置监听器来响应特定事件的发生,这可能是通过Firebase的`on()`函数实现的,它可以在数据变化时触发回调函数。 7. **数据结构...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十六:浏览器对象模型

    event对象在JavaScript事件处理中扮演重要角色,它携带着关于事件的信息,如事件类型、触发位置等。通过event对象,我们可以实现事件监听和响应,例如`addEventListener()`和`removeEventListener()`。 通过学习和...

    实验项目二十二  javascript事件处理.doc

    在本实验项目中,我们将学习 JavaScript 事件处理的基本概念、事件处理模型、常用事件及处理方法。 一、浏览器事件及处理 浏览器事件是指在浏览器中发生的事件,如加载网页、关闭网页等。在 JavaScript 中,我们...

    【JavaScript源代码】VUE入门学习之事件处理.docx

    - `.once`:事件只触发一次。 - `.passive`:优化滚动事件性能,不会阻止滚动。 5. **按键修饰符**:对于键盘事件,Vue提供了特定的按键修饰符,如`.enter`(回车键)、`.tab`(制表键)、`.delete`(删除键和...

    W11A-Javascript-Events:W11A; JavaScript事件。 这是创新科技学院的一项任务

    在事件处理程序中,可以通过`event`参数访问这个对象。 3. **事件冒泡与事件捕获**:在事件传播过程中,有冒泡和捕获两种模式。冒泡是指事件从最深的节点开始,逐级向上层节点传播。捕获则相反,从最外层节点开始向...

    javascript学习笔记2

    ### JavaScript 学习笔记2:字符串与事件对象总结 #### 字符串操作方法总结 在JavaScript中,字符串是一系列字符的有序集合。JavaScript提供了一系列内置的方法来帮助我们处理字符串,这些方法可以用来检索、替换...

    前端JavaScript入门学习资源

    总的来说,这个压缩包提供了一个全面的JavaScript入门学习路径,覆盖了从基础语法到DOM操作、事件处理、时间函数以及用户交互等多个重要方面,是初学者理想的自学资源。通过深入学习和实践这些内容,你将能够掌握...

    javaScript经典实例

    例如,`addEventListener()`用于绑定事件处理函数,`event.preventDefault()`阻止默认行为,`event.stopPropagation()`阻止事件冒泡。 3. **动画效果**:JavaScript可以创建各种动态效果,如滑动、淡入淡出、旋转等...

    javaScript知识大全

    - 事件冒泡和事件捕获:事件处理的两种模式,决定了事件处理的顺序。 6. **DOM操作**: - DOM(文档对象模型):将HTML/CSS文档结构化为可操作的对象。 - 获取元素:通过getElementById、getElementsByClassName...

Global site tag (gtag.js) - Google Analytics