百度360必应搜狗淘宝本站头条
vue dispatchspring gatewayorder by ascidea eval resetupdate canceled
当前位置：网站首页 > 技术分类 > 正文

JavaScript学习之事件

ztj100 2025-01-20 18:23 19 浏览 0 评论

1 基本概念

1.1 事件

JavaScript与HTML之间的交互是通过事件实现的。

事件是文档或浏览器窗口中发生的一些特定的交互瞬间，在事件上可以注册处理程序，以便当事件发生时，处理程序中的代码得到执行（这种模型对应设计模式中的观察者模式）。

1.2 事件流

事件流描述的是从页面接受事件的顺序。

2 事件流

2.1 事件冒泡

IE事件流叫做事件冒泡，即事件开始由最具体的元素接受，然后逐渐向上传播到较为不具体的节点。

事件冒泡能够被所有浏览器支持。注意IE5.5及更早版本的事件冒泡会跳过<html>元素（从<body>直接跳到document）。IE9，Firefox，Chrome和Safari则将事件一直冒泡到window对象。

2.2 事件捕获

事件捕获是由不太具体的节点最早接受到事件，而最具体的元素最后接受到事件。事件捕获的用意在于在事件到达预定的目标之前捕获它。

事件捕获不支持老版本的浏览器，但IE9，Firefox，Chrome,Opera和Safari目前都支持这种事件流模型。

2.3 DOM事件流

"DOM2事件流"包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段；在DOM事件流中，实际的目标在捕获阶段不会接受到事件(但IE9、Safari、Chrome、Firefox和Opera 9.5及更高版本都会在捕获阶段触发事件对象上的事件，即有两个机会在目标对象上面操作事件)。

IE9，Firefox，Chrome,Opera和Safari都支持DOM事件流；IE8及更早版本不支持DOM事件流。

3 事件处理程序

事件是用户或浏览器自身执行的某种动作，常见的事件有click，focus，load；而响应事件的函数叫做事件处理程序（或事件侦听器）。事件处理程序的名字以"on"开头，例如click事件对应的事件处理程序就是onclick,focus事件对应的事件处理程序就是onfocus,load事件对应的事件处理程序就是onload。

3.1 HTML事件处理程序

HTML元素支持的每种事件，都可以用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码。例如：

<input type="button" value="click me" onclick="showMessage"/>

HTML中指定事件处理程序有两个缺点：

首先存在时差问题。如果在HTML元素一出现在页面就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。具体说来，上例中如果事件处理程序showMessage是在按钮下方，页面底部定义的，当用户在页面解析该函数之前就单击了按钮，就会引发错误；

另一个缺点是，这样扩展事件处理程序的作用链在不同浏览器中会导致不同结果。

通过HTML指定事件处理程序的另一个缺点是HTML和JavaScript代码紧密耦合。如果要更换事件处理程序，需要同时改动两个地方：HTML代码和JavaScript代码。

3.2 DOM0级事件处理程序

指定事件处理程序的传统方式就是将一个函数赋值给一个事件处理程序属性。这种方式优点：1.简单，2.具有跨浏览器的优势。为元素指定事件处理程序分两步：

（1）取得要操作对象的引用；

（2）将该元素的事件处理程序属性如onclick设置为一个函数。示例如下： 

<input type="button" value="click me" id="myBtn"/>
<script>
	var btn = document.getElementById('myBtn');
	btn.onclick = function{ alert("I am clicked!"); }
</script>

使用DOM0级方法指定的事件处理程序被认定为是元素的方法，即事件处理程序是在元素的作用域中运行，此时this引用当前元素。

删除DOM0级事件处理程序:btn.onclick = null;

3.3 DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener和removeEventListener。这两个方法都接受三个参数：要处理的事件名称，事件处理程序函数，布尔值。其中布尔值为true表示在捕获阶段调用事件处理程序，否则表示在冒泡阶段调用事件处理程序。

与DOM0级事件处理程序一样，DOM2级事件处理程序也是在依附的元素的作用域中运行。使用DOM2级方法添加事件处理程序的好处是可以添加多个事件处理程序。示例如下：

<input type="button" value="click me" id="myBtn"/>
<script>
	var btn = document.getElementById('myBtn');

	btn.addEventListener("click", function{
		alert("first");
	}, false);
	btn.addEventListener("click", function{
		alert("second");
	}, false);
</script>

运行后，先后弹内容为"first"和"second"的对话框，说明可以通过addEventListener为元素添加多个事件处理程序。

通过addEventListener添加的事件处理程序只能通过removeEventListener来移除；移除时传入的参数与添加时传入的参数相同。注意通过addEventListener添加的匿名函数将无法移除。

<input type="button" value="click me" id="myBtn"/>
<script>
	var btn = document.getElementById('myBtn');

	btn.addEventListener("click", function{
		alert("first");
	}, false);

	btn.removeEventListener("click", function{	//失效：删除匿名函数并不是同一个函数
		alert("first");
	}, false);

	var secondFunc = function{
		alert("second");
	};
	btn.addEventListener("click", secondFunc, false);
	btn.removeEventListener("click", secondFunc, false);//成功：删除同一个处理函数
</script>

运行后只有一个弹窗，内容为"first"，说明在使用removeEventListener删除addEventListener添加的事件处理函数时，必须保证第二个参数非匿名函数。

DOM2级事件处理程序的添加大多数都是在事件的冒泡阶段（第三个参数为false），这样可以最大限度地兼容各种浏览器。

IE9，Firefox，Chrome,Opera和Safari支持DOM2级事件处理程序。

3.4 IE事件处理程序

IE实现了与DOM中类似的两个方法：attachEvent和detachEvent。这两个方法接受相同的两个参数：事件处理程序名称和事件处理程序函数。由于IE8及更早的版本只支持事件冒泡，所以通过attachEvent添加的事件处理程序都会被添加到冒泡阶段。

在IE中使用attachEvent与使用DOM0级方法的主要区别是事件处理程序的作用域，使用attachEvent方法的情况下，事件处理程序会在全局作用域运行，因此this === window。

attachEvent添加多个事件处理程序，执行顺序与添加顺序相反。

使用attachEvent添加的事件可以通过detachEvent来移除，条件是必须提供相同的参数。与DOM方法一样，添加的匿名函数不能被移除。

支持IE事件处理程序的浏览器有IE和Opera。

3.5 跨浏览器的事件处理程序

要保证事件处理程序在大多数浏览器中一致地运行，只需关注冒泡阶段。 

var EventUtil = {
	addHandler: function(element, type, handler){
		if(element.addEventListener){
			element.addEventListener(type, handler, false);
		}
		else if(element.attachEvent){
			element.attachEvent("on" + type, handler);
		}
		else{
			element["on" + type] = handler;
		}
	},
	removeHandler: function(element, type, handler){
		if(element.removeEventListener){
			element.removeEventListener(type, handler, false);
		}
		else if(element.detachEvent){
			element.detachEvent("on" + type, handler);
		}
		else{
			element["on" + type] = null;
		}
	}
};

4 事件对象

4.1 DOM事件对象

兼容DOM（DOM0级和DOM2级）的浏览器会将一个event对象传入到事件处理程序中。

要阻止特定的默认行为用preventDefault方法，要立即停止事件在DOM层次中的传播用stopPropagation方法。

在事件处理程序中，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。

4.2 IE事件对象

与访问DOM中的event对象不同，IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。

使用DOM0级方法添加事件处理程序时，event作为window对象的一个属性存在；如果使用attachEvent添加事件处理程序，那么就会有一个event对象作为参数被传入事件处理函数中（也可以通过window对象来访问event对象）。

IE的event对象包含于创建它的事件相关的属性和方法。

其中cancelBubble设置为true与DOM中stopPropagation方法的作用相同；

returnValue设置为false与DOM中preventDefault方法的作用相同。

srcElement表示事件的目标，与DOM中target属性相同。

type被触发的事件类型与DOM中type属性相同。

4.3 跨浏览器的事件对象

在前面的EventUtil中添加方法来处理DOM和IE中event对象的差异(以下只展示添加的代码)： 

getEvent: function(event){
　　return event ? event : window.event;
},
getTarget: function(event){
　　return event.target || event.srcElement;
},
preventDefalut: function(event){
　　if(event.preventDefalut){
　　　　event.preventDefalut;　　
	}
　　else{
　　　　event.returnValue = false;
　　}
},
stopPropagation: function(event){
　　if(event.stopPropagation){
　　　　event.stopPropagation;
　　}
　　else{
　　　　event.cancelBubble = true;
　　}
}

相关推荐

其实TensorFlow真的很水无非就这30篇熬夜练

好的！以下是TensorFlow需要掌握的核心内容，用列表形式呈现，简洁清晰（含表情符号，<300字）：1.基础概念与环境TensorFlow架构（计算图、会话->EagerE...

交叉验证和超参数调整:如何优化你的机器学习模型

准确预测Fitbit的睡眠得分在本文的前两部分中，我获取了Fitbit的睡眠数据并对其进行预处理，将这些数据分为训练集、验证集和测试集，除此之外，我还训练了三种不同的机器学习模型并比较了它们的性能。在...

机器学习交叉验证全指南:原理、类型与实战技巧

机器学习模型常常需要大量数据，但它们如何与实时新数据协同工作也同样关键。交叉验证是一种通过将数据集分成若干部分、在部分数据上训练模型、在其余数据上测试模型的方法，用来检验模型的表现。这有助于发现过拟合...

深度学习中的类别激活热图可视化

作者：ValentinaAlto编译：ronghuaiyang导读使用Keras实现图像分类中的激活热图的可视化，帮助更有针对性...

超强，必会的机器学习评估指标

大侠幸会，在下全网同名[算法金]0基础转AI上岸，多个算法赛Top[日更万日，让更多人享受智能乐趣]构建机器学习模型的关键步骤是检查其性能，这是通过使用验证指标来完成的。选择正确的验证指...

机器学习入门教程-第六课:监督学习与非监督学习

1.回顾与引入上节课我们谈到了机器学习的一些实战技巧，比如如何处理数据、选择模型以及调整参数。今天，我们将更深入地探讨机器学习的两大类：监督学习和非监督学习。2.监督学习监督学习就像是有老师的教学...

Python教程(三十八):机器学习基础

...

Python 模型部署不用愁!容器化实战，5 分钟搞定环境配置

你是不是也遇到过这种糟心事：花了好几天训练出的Python模型，在自己电脑上跑得顺顺当当，一放到服务器就各种报错。要么是Python版本不对，要么是依赖库冲突，折腾半天还是用不了。别再喊“我...

超全面讲透一个算法模型，高斯核!!

...

神经网络与传统统计方法的简单对比

传统的统计方法如...

AI 基础知识从0.1到0.2——用“房价预测”入门机器学习全流程

...

自回归滞后模型进行多变量时间序列预测

下图显示了关于不同类型葡萄酒销量的月度多元时间序列。每种葡萄酒类型都是时间序列中的一个变量。假设要预测其中一个变量。比如，sparklingwine。如何建立一个模型来进行预测呢？一种常见的方...

苹果AI策略:慢哲学——科技行业的“长期主义”试金石

苹果AI策略的深度原创分析，结合技术伦理、商业逻辑与行业博弈，揭示其“慢哲学”背后的战略智慧：一、反常之举：AI狂潮中的“逆行者”当科技巨头深陷AI军备竞赛，苹果的克制显得格格不入：功能延期：App...

时间序列预测全攻略，6大模型代码实操

如果你对数据分析感兴趣，希望学习更多的方法论，希望听听经验分享，欢迎移步宝藏公众号...

AI 基础知识从 0.4 到 0.5—— 计算机视觉之光 CNN

...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
赣ICP备2023011147号-29