首页 web前端 js教程 JavaScript Event学习第三章 早期的事件处理程序_javascript技巧

JavaScript Event学习第三章 早期的事件处理程序_javascript技巧

May 16, 2016 pm 06:35 PM
event 事件处理

这些古老的浏览器只支持一种注册事件处理程序的方法,这个方法是Netscape发明的。因为Netscape先发制人,所以如果微软也想做支持JavaScript事件的浏览器就得跟着Netscape走,所以这里没有兼容性的问题。所以这种模式在任何支持JavaScript的浏览器都能运行---除了Mac上的IE3,他根本就不支持事件。
注册事件处理程序
在内联式的事件注册模型中,事件处理程序就像是一个HTML元素的属性,比如:

当这个链接上发生单击事件的时候,事件处理程序就被触发然后执行你的脚本:一个警告对话框弹出。你也可以触发一个JavaScript函数:

上面两个例子里面事件的名字的大小写只是一个习惯问题,HTML是大小写不敏感的,所以你想怎么写都可以。XHTML要求所有的属性名称必须都是小写,所以如果你使用的XHTML那么名字就要写成onclick。
不要用他
虽然这种内联型的注册模型很古老也很可靠,但是他有一个不足。他要求你在XHTML结构层里面写上本不属于这里的JavaScript代码。
所以我强烈建议你不要使用这种方法。在这里我有详细的解释。
理解这些旧的模型对于JavaScript事件处理的全局感有很大帮助,但是你最好还是使用我后面说明的现代模式。
默认动作
当年Netscape设置了默认动作也有怎样防止默认动作运行。他的模式拯救了浏览器大战和标准的制定,而且到如今都很好的运行着。
众所周知,当用户点击了一个链接浏览器就会按照href的属性加载页面。这是链接上的默认动作。但是当你定义了一个onclick事件处理程序了以后会发生什么呢?应该能被执行,但是什么时候呢?

如果在这个链接上单击,那么事件处理程序一定会被首先执行。毕竟当默认动作发生--新页面加载--旧的页面包括事件处理程序本身都会从内存中清除。如果onclick的事件处理程序执行了,那么一定是在默认动作之前。
这就有了一个非常重要的原理。如果一个事件同时触发了默认动作和事件处理程序,那么:
、事件处理程序会首先执行
、默认动作随后执行
所以在上面的例子中,doSomething()会首先执行,然后浏览器会打开链接。
阻止默认事件
当这些都确定之后,大家大多开始考虑如何阻止默认事件。在我们的例子中就可以阻止浏览器打开新的页面。
所以事件处理程序可以返回一个布尔值(ture或者false),false的含义就是“不要进行默认动作”。这样我们就可以把例子改成:

这个链接就不会跟着执行了。这个函数执行之后程序返回false,告诉浏览器不要执行默认动作。
有时候有必要让函数决定什么时候该执行什么时候不该执行默认动作。所以我们可以把例子改成:

复制代码 代码如下:

这就是(非常简单的)用户交互。用户会被问一个问题,如果回答是肯定的那么函数返回true,如果取消了那么久返回一个false。这个返回值会被事件处理程序捕获,然后转给事件本身。如果是flase那么默认动作就不会被执行--链接不会进入。
然而,不是所有的默认动作都能被阻止。比如unload事件就不行。假设用户关闭浏览器窗口--触发了unload事件。如果你能阻止关闭窗口,那么窗口会违背用户的意愿而一直打开着么?当然不会。
你可以试试微软的beforeunload属性来阻止unload。与其制造一个非常混乱的情况让用户来选择确认这个行为。那不如不用。
返回false来阻止默认动作是所有浏览器都支持的这是事件处理程序的基本组成。如今的事件处理程序模型还添加了一些新的方法来阻止默认动作:
W3C给事件添加了preventDefalut()方法。如果你引用了这个方法那么默认动作就会被阻止。
微软给事件添加了returnValue属性。如果你设置他的值为false那么默认动作也会被阻止。
但是用不着这些个,简单的返回false就够了。
window.status
这里对于返回false有一个例外。当你设置鼠标经过链接的时候改变窗口的状态栏以后,你还想阻止默认动作--在状态栏显示链接地址--的时候,你就应该返回true:
复制代码 代码如下:

如果你不这样做,那么代码就不会工作。没人知道那是怎么回事,就是一个比较怪异的事情。
this
在JavaScript里this关键字通常指函数的所有者。如果this指向事件发生的HTML元素,那么一切都是那么的美好,你可以很简单的做很多事情。
不幸的是,虽然this非常的强大,但是如果你不是明确的知道他怎么运作的话使用起来还是比较难的。关于这个我在另一个地方有详细的讨论,在这我在内联模式下做一些概述。
在内联模式下你可以将this作为一个事件处理程序函数的一个参数。所以你可以:
复制代码 代码如下:

你给函数传递了一个引用,存储在obj里面。现在你不需要在遍历文档寻找是哪个元素被点击了:他很安全的存储在变量obj里面。现在你就可以:
复制代码 代码如下:

函数接受到一个链接的引用存储在obj里面。现在你可以读取这个链接的链接地址然后进行确认。你可以把这个技巧运用在任何一个链接上:他总是会显示你刚才点击的那个链接的真实地址。
继续
如果需要继续学习,请看下一章。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1665
14
CakePHP 教程
1424
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
Python GUI编程:快速上手,轻松打造交互式界面 Python GUI编程:快速上手,轻松打造交互式界面 Feb 19, 2024 pm 01:24 PM

pythonGUI编程简述GUI(GraphicalUserInterface,图形用户界面)是一种允许用户通过图形方式与计算机交互的方式。GUI编程是指使用编程语言来创建图形用户界面。Python是一种流行的编程语言,它提供了丰富的GUI库,使得PythonGUI编程变得非常简单。PythonGUI库介绍Python中有许多GUI库,其中最常用的有:Tkinter:Tkinter是Python标准库中自带的GUI库,它简单易用,但功能有限。PyQt:PyQt是一个跨平台的GUI库,它功能强大,

如何在C++中管理完整的循环队列事件? 如何在C++中管理完整的循环队列事件? Sep 04, 2023 pm 06:41 PM

介绍CircularQueue是对线性队列的改进,它被引入来解决线性队列中的内存浪费问题。循环队列使用FIFO原则来插入和删除其中的元素。在本教程中,我们将讨论循环队列的操作以及如何管理它。什么是循环队列?循环队列是数据结构中的另一种队列,其前端和后端相互连接。它也被称为循环缓冲区。它的操作与线性队列类似,那么为什么我们需要在数据结构中引入一个新的队列呢?使用线性队列时,当队列达到其最大限制时,尾指针之前可能会存在一些内存空间。这会导致内存损失,而良好的算法应该能够充分利用资源。为了解决内存浪费

PHP8.0中的事件处理库:Event PHP8.0中的事件处理库:Event May 14, 2023 pm 05:40 PM

PHP8.0中的事件处理库:Event随着互联网的不断发展,PHP作为一门流行的后台编程语言,被广泛应用于各种Web应用程序的开发中。在这个过程中,事件驱动机制成为了非常重要的一环。PHP8.0中的事件处理库Event将为我们提供一个更加高效和灵活的事件处理方式。什么是事件处理在Web应用程序的开发中,事件处理是一个非常重要的概念。事件可以是任何一种用户行

Steam 夏季特卖 - Valve 预告 AAA 游戏可享受 95% 的折扣,确认病毒游戏 Palworld 和内容警告的折扣 Steam 夏季特卖 - Valve 预告 AAA 游戏可享受 95% 的折扣,确认病毒游戏 Palworld 和内容警告的折扣 Jun 26, 2024 pm 03:40 PM

Steam 的夏季特卖此前曾举办过一些最优惠的游戏折扣,而今年 Valve 似乎又迎来了另一场全垒打。刚刚发布了一段预告片(请参见下文),其中展示了一些 Steam 夏季特卖折扣游戏。

冒泡事件的含义是什么 冒泡事件的含义是什么 Feb 19, 2024 am 11:53 AM

冒泡事件是指在Web开发中,当一个元素上触发了某个事件后,该事件将会向上层元素传播,直到达到文档根元素。这种传播方式就像气泡从底部逐渐冒上来一样,因此被称为冒泡事件。在实际开发中,了解和理解冒泡事件的工作原理对于正确处理事件十分重要。下面将通过具体的代码示例来详细介绍冒泡事件的概念和使用方法。首先,我们创建一个简单的HTML页面,其中包含一个父级元素和三个子

Vue中的v-on指令解析:如何处理表单提交事件 Vue中的v-on指令解析:如何处理表单提交事件 Sep 15, 2023 am 09:12 AM

Vue中的v-on指令解析:如何处理表单提交事件在Vue.js中,v-on指令用于绑定事件监听器,可以捕获并处理各种DOM事件。其中,处理表单提交事件是Vue中常见的操作之一。本文将介绍如何使用v-on指令处理表单提交事件,并提供具体的代码示例。首先,需要明确Vue中的表单提交事件指的是当用户点击submit按钮或按下回车键时触发的事件。在Vue中,可以通过

Vue中使用$listeners传递事件处理函数 Vue中使用$listeners传递事件处理函数 Jun 11, 2023 pm 03:09 PM

在Vue中常常会有一些组件嵌套的情况,而这些嵌套的组件之间需要进行事件的传递。在Vue中,使用了$emit事件来进行组件之间的事件通信。但是,在某些情况下,我们需要将一个父组件的事件处理函数传递给嵌套的子组件,这时候,使用$emit事件就不太合适了。这时候,可以使用Vue提供的$listeners来进行事件处理函数的传递。那么,什么是$listeners呢?

深入研究PHP和Vue在脑图功能中的关键代码实现 深入研究PHP和Vue在脑图功能中的关键代码实现 Aug 27, 2023 pm 12:15 PM

深入研究PHP和Vue在脑图功能中的关键代码实现摘要:本文将深入探讨PHP和Vue在实现脑图功能中的关键代码实现。脑图是一种常用于展示思维结构和关联关系的图形工具,被广泛应用于项目规划、知识管理和信息整理等领域。通过学习PHP和Vue的相关知识,我们可以实现一个简单而功能强大的脑图应用。了解PHPPHP是一种常用的服务器端脚本语言。它具有简单易学、可扩展性强

See all articles