JavaScript高级程序设计11--事件

最新推荐文章于 2022-09-15 18:06:13 发布

木槿花开lalala

最新推荐文章于 2022-09-15 18:06:13 发布

阅读量342

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zl_best/article/details/53820334

版权

本文深入探讨JavaScript中的事件，包括事件流（冒泡和捕获）的概念，DOM2级事件处理程序（addEventListener和removeEventListener）的使用，以及DOM和IE的事件对象差异。此外，介绍了各种事件类型，如UI、鼠标、键盘、焦点和滚动事件，还涉及了事件委托、内存管理和事件模拟等最佳实践。

摘要由CSDN通过智能技术生成

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

一、事件流

事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator 的事件流是事件捕获流。

（1）事件冒泡

IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素 (文档中嵌套层次最深的那个节点) 接收，然后逐级向上传播到较为不具体的节点(文档)。

比如单击了页面中的<div>元素，那么这个click事件会按照如下顺序逐级向上传播，直至传播到 document 对象。

注意：所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。IE5.5及更早版本中的事件冒泡会跳过 <html> 元素 (从 <body> 直接跳到 document) 。Firefox、Chrome 和 Safari 则将事件一直冒泡到 window 对象

（2）事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。

前面的例子的事件捕获过程为：

（3）DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

同样前面的例子触发事件的顺序为：

二、事件处理程序

事件就是用户或浏览器自身执行的某种动作。而响应某个事件的函数就叫做事件处理程序 (或事件侦听器)。事件处理程序的名字以 "on" 开头，比如 click 事件的事件处理程序就是 onclick。为事件指定处理程序的方式有以下几种。

（1）HTML事件处理程序

在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本。

<input type="button" value="Click Me" οnclick="alert('Clicked')" />

或者

<script type="text/javascript">  
    function showMessage(){  
        alert("Hello world!");  
    }  
  </script>  
  <input type="button" value="Click Me" οnclick="showMessage()" />

关于动态创建的函数，另一个有意思的地方是它扩展作用域的方式。

function () {
	with(document) {
		with(this) {
			//元素属性值
		}
	}
}
<input type="button" value="Click Me" οnclick="alert(value)">

如果当前元素是一个表单输入元素，则作用域中还会包含访问表单元素的入口。

function () {
	with(document) {
		with(this.form) {
			with(this){
			//元素属性值
			}	
		}	
	}
}
<form method="post">
	<input type="text" name&#

最低0.47元/天解锁文章

木槿花开lalala

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级程序设计11--事件

JavaScript 与 HTML 之间的交互是通过事件实现的。一、事件流事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator 的事件流是事件捕获流。（1）事件冒泡IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素 (文档中嵌套层次最深的那个节点) 接收，然后逐级向上传播到较为不具体的节点(文档)。比如单击了页
复制链接

扫一扫