javascript高级程序设计 第十三章--事件

　　　　　　　　　　javascript高级程序设计 第十三章--事件
js与HTML的交互就是通过事件实现的，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
　　事件流：事件流描述的是从页面中接收事件的顺序，IE的是事件冒泡流，Netscape的是事件捕获流，这个两个
是完全相反的事件流概念。
　　事件冒泡：由最具体的元素接收，然后逐级向上传播到更高级的节点，即事件沿DOM树向上传播，直到document
对象。
　　事件捕获：不大具体的节点应该更早接收到事件，相当于沿DOM节点树向下级传播直到事件的实际目标，在浏
览器中，是从window对象开始捕获事件的
DOM事件流： DOM事件流规定了三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段 ，实际的目标在
捕获阶段不会接收到事件，这是实际目标处于处于目标阶段
事件处理程序：影响某个事件的函数就叫做事件处理程序（或事件侦听器）比如：click事件的事件处理程序就是
onclick
HTML事件处理程序：某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定，
可以包含要执行的具体操作，也可以调用在页面其他地方定义的脚本；事件处理程序的代码执行时，有权访问全
局作用域中的任何代码；还可以使用with语句扩展作用域。
DOM0级事件处理程序：首先要取得一个要操作对象的引用，这时候的事件处理程序是在元素的作用域中运行。
DOM2级事件处理程序：定义了用于处理指定和删除事件处理程序的方法：addEventListener() 和
removeEventListener()，它们接收三个参数：事件名、作为事件处理的函数和一个布尔值（true表示在捕获阶
段调用事件处理程序，false表示在冒泡阶段调用事件处理程序）
IE事件处理程序： 定义了两个方法，attachEvent()和detachEvent() 接收两个参数：事件处理程序名称和事件
处理程序函数，使用这种方法事件处理程序会在全局作用域中运行。
事件对象：在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息
DOM中的事件对象：浏览器一般都会将一个event对象传入到事件处理程序中。event.type属性表示事件的类型
在事件处理程序内部，对象this始终指向正在处理事件的那个元素，即event对象的currentTarget属性，总之，
event对象一样具有多种属性和方法，只有在事件处理程序执行期间，event对象才存在；一旦事件处理程序
执行完毕，event对象就会被销毁；
IE中的事件对象：要访问IE 中的event对象取决于指定事件处理程序的方法。当使用DOM0级方法添加事件处理
程序时，event对象作为window对象的一个属性存在；使用HTML特性指定的事件处理程序时可以通过一个名
叫event的变量来访问event对象。还有一点就是事件处理程序的作用域是根据指定它的方式来确定的，this对象
不会始终等于事件目标（这时可以使用event.srcElement）
事件类型：UI事件：当用户与页面上的元素交互时触发。load：当页面完全加载后（包括所有图像、js文件、
css文件等外部资源）就会触发window上面的load事件，定义onload事件处理程序，第一种方式是使用js代码
调用EventUtil.addHandler方法；第二种方式是为<body>元素添加一个onload特性
unload事件：这个事件在文档被完全卸载后触发，或者用户从一个页面切换到另一个页面也会触发unload事件
这个事件多用来清除引用，避免内存泄露。指定onunload事件处理程序的方式和onload事件一样；
resize事件：当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件。这个事件在window上面
触发，通过js代码来指定： EventUtil.addHandler(window,"resize",function(event){alert("Event");});
scroll事件：scroll事件是在window对象上发生的，但它实际上表示的则是页面中相应元素的变化。
焦点事件：焦点事件会在页面获得或失去焦点时触发，利用这些事件和document.hasFocus()方法及
document.activeElement()方法配合。
blur：在元素失去焦点时触发，这个事件不会冒泡，所有浏览器都支持它
DOMFocusIn：在元素获得焦点时触发，与HTML事件focus等价，但它会冒泡，只有opera支持
DOMFocusOut：元素失去焦点时触发，与HTML事件blur等价，但它会冒泡，只有opera支持
focus：在元素获得焦点时触发，不会冒泡所有浏览器都支持它
focusin：在元素获得焦点时触发，与HTML事件focus等价，但它会冒泡
focusout：元素失去焦点时触发，这个事件是HTML事件blur的通用版本
鼠标与滚轮事件
click：单击鼠标或者按下回车键时触发
dblclick：双击鼠标时触发
mousedown：用户按下了任意鼠标按钮时触发，不能通过键盘触发
mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发，事件不会冒泡，移动到后代元素上也
不会触发
mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发，事件不会冒泡，移动到后代元素上也
不会触发
mousemove：当鼠标指针在元素内部移动是重复地触发
mouseout：在鼠标指针位于一个元素上方，然后用户将其移入到另一个元素时触发
mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发
mouseuop：在用户释放鼠标时触发
客户区坐标位置：鼠标事件都是在浏览器视口中的特定位置上发生的，这个位置信息保存在事件对象的
clientX和clientY属性中，所有浏览器都支持这两个属性，它们 的值表示事件发生时鼠标指针在视口中的水平
和垂直坐标
页面坐标位置：页面坐标通过事件对象的pageX和pageY属性告诉我们事件是在页面中的什么位置发生的，这
两个属性表示鼠标光标在页面中的位置
屏幕坐标位置：鼠标事件发生时，不仅会有相对于浏览器窗口的位置，还有一个相对于整个电脑屏幕的位置，
通过screenX和screenY属性可以访问到鼠标指针相对于整个屏幕的坐标信息
修改键：在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作，这些修改键是shift Ctrl Alt Windows
键盘与文本事件
keydown：当用户按下键盘上的任意键时触发，如果按住不放会重复触发此事件
keypress：当用户按下键盘上的字符键时触发，如果按住不放会重复触发此事件（Esc也会触发）
keyup：当用户释放键盘上的键时触发
键码：在发生keydown和keyup事件时，event对象的keyCode属性中会包含一个代码，与键盘上一个特定的
键对应。
textInput事件：当用户在可编辑区域中输入字符时，就会触发textInput事件，该事件只会在用户按下能够输入
实际字符的键时才会被触发，textInput事件的event对包含一个data属性，这个属性的值就是用户输入的字符；
还有一个inputMethod,表示把文本输入到文本框的方式。
复合事件：复合事件用于处理IME的输入序列，可以让用户输入在物理键盘上找不到的字符，但只有IE9+支持
这个事件。
变动事件：总结来说变动事件就是HTML中DOM节点树发生变化时触发的一系列事件，包括添加节点、删除
节点、替换节点等操作
HTML5事件
contextmenu事件：用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的
菜单；contextmenu是冒泡的，可以为document指定一个事件处理程序
beforeunload：这个事件在浏览器卸载页面之前触发，可以通过它来取消卸载并继续使用原有页面。要显示
弹出对话框，要把event.returnValue的值设为要显示给用户的字符串，同时作为函数的值返回
DOMContentLoaded事件：在形成完整的DOM树之后就会触发，不理会图像、js文件、css文件或其他资源
是否下载完毕
readystatechange：提供与文档或元素的加载状态有关的信息，readystatechange事件的每个对象都有一个
readyState属性，返回文档或元素的加载状态
pageshow事件：这个事件会在页面显示时触发（load事件后触发），虽然这个事件的目标是document，但
必须将其事件处理程序添加到window中
pagehide事件：该事件会在浏览器卸载页面的时候触发（unload之前触发），其特性与pageshow事件一样
hashchange事件：该事件在URL的参数列表发生变化时触发，hashchange事件的事件处理程序要添加到
window中，此时的event对象包含两个属性：oldURL和newURL 这两个属性分别保存着参数列表变化前后
的完整URL
内存与性能：在javascript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。
事件委托：事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件处理程序，
这样就不必在每个目标元素上都去添加事件了。
移除事件处理程序：可以把与目标函数绑定的函数设置为null，或者通过onunload事件处理程序移除所有事件
处理程序。
模拟事件
DOM中的事件模拟：可以在document对象上使用createEvent()方法创建event对象，这个方法接收一个参数
即要表示创建的事件类型字符串。模拟事件主要分为模拟鼠标事件和模拟键盘事件，当然也有模拟其他事件，
调用createEvent()方法后，再调用dispatchEvent()方法来触发事件。创建鼠标事件对象的方法是为createEvent()
传入字符串"MouseEvents"，返回的对象有一个initMouseEvent()方法，用于指定与该鼠标事件有用的信息。
模拟键盘事件的方法类似，为createEvent()方法传入"KeyboardEvent",返回的对象有一个initKeyEvent()
方法。 事件模拟很大程度上提升了页面的性能和内存。

时间： 2024-10-20 18:15:26

javascript高级程序设计 第十三章--事件的相关文章

javascript高级程序设计 第十一章--DOM扩展

javascript高级程序设计 第十一章--DOM扩展DOM最主要的扩展就是选择符API.HTML5和Element Traversal Selectors API:定义了两个方法 querySelector() 和 querySelectorAll(),能够基于CSS选择符从DOM中取得元素.querySelector()方法接收一个CSS选择符,返回该模式匹配的第一个元素,querySelectorAll()接收的参数一样,但是返回NodeList实例: matchesSelector()

Javascript高级程序设计——第三章：基本概念

javascript高级程序设计——第三章:基本概念 一.语法 EMCA-262通过叫做ECMAScript的“伪语言”为我们描述了javascript实现的基本概念 javascript借鉴了C的语法,区分大小写,标示符以字母.下划线.或美元符号($)开头,注释可以用 // 或者/* */ 严格模式: ECMAScript 5引入了严格模式,在严格模式下不确定的行为将得到处理,通过在顶部添加 “use strict”来启用严格模式: function fuc(){ "use strict&qu

《JavaScript高级程序设计第五章--引用类型》之Object对象和array对象

这一章主要就是介绍各种内置对象的用法,认识其经常用到的属性和方法. 5.1Object类型 创建objec的方式,一种是new Object(),一种是对象字面量(简化创建包含大量属性的对象的过程) var person = { name = "Nicholas"; age = 27 };//最后一个属性不必添加逗号,ie7等会导致错误 //在使用对象字面量语法时,属性名也可以使用字符串.这里的数值属性会自动转字符串. var person = { "name" :

【javascript 高级程序设计笔记——第九章：事件】

第 9 章:事件 一.事件类型 IE:冒泡.至 document Netscape:捕获.从 document 开始 Mozilla:冒泡 + 捕获.至 window DOM:冒泡 + 捕获. 大部分兼容标准的浏览器至 window 二.监听函数 IE 每个元素和 window 对象有两个方法: [object].attachEvent('onclick', fnHandler); [object].detachEvent('onclick', fnHandler); DOM 语法 [objec

JavaScript高级程序设计第14章表单脚本 （学习笔记）

第十四章 表单脚本 1.阻止默认表单提交 1.提交表单数据 1.使用type=submit提交按钮 2.使用submit():方法 注意:当用户点击提交按钮时,会触发submit事件,从而在这里我们有机会验证数据并决定要不要提交表单 1.preventnDefault(event):可以用在表单数据无效时不发给服务器,对于动态绑定的onclick 事件. 2.Submit()方法也可以提交表单,但是不会触发submit事件,所以在使用时须先验证表单数据, 如:<%response.write(t

JavaScript高级程序设计：第二章

在HTML中使用JavaScript 1.<script>元素:向HTML页面中插入JavaScript的主要方法就是使用<scritp>元素.HTML4.01为<script>定义了下列6个属性. (1)async:可选.表示立即下载脚本,但不妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. (2)charset:可选.表示通过src属性指定的代码的字符集.由于大多数浏览器会忽略它的值,因此这个属性很少有人用. (3)defer:可选.

JavaScript高级程序设计：第一章

JavaScript简介: 1.JavaScript实现应该由以下三部分组成: (1)核心:ECMAScript (2)文档对象模型:DOM (3)浏览器对象模型:BOM 2.什么是ECMAScript兼容: (1)支持ECMA-262描述的所有“类型.值.对象.属性.函数以及程序句法和语义”. (2)支持Unicode字符标准. (3)添加ECMA-262没有描述的“更多类型.值.对象.属性和函数”. (4)支持ECMA-262没有定义 3.文档对象模型(DOM) 1.文档对象模型是针对XML

javascript高级程序设计 1 ~ 3 章 部分知识点总结

第一章 javascript简介 javascript的简介,有关js的一些历史问题. js初期在不同的浏览器存在很大的兼容问题,但是慢慢的大家都在向标准靠拢,兼容问题已经好很多了. 我们通常会听到ECMAScript,它跟javascript是什么关系呢? JS = ES + BOM(浏览器对象模型) + DOM(文档对象模型)  ES就是对javascript的类型,值,对象,属性,函数以及程序句法和语义,DOM就是ES运行在浏览器环境的时候,浏览器为其提供的扩展以实现更多更具体的功能(we

《JAVASCRIPT高级程序设计》第一章

在使用调制解调器的时代,频繁的表单验证对客户端来说是一个很大的负担,javascript,作为一种专门进行表单验证的客户端脚本语言诞生了.到今天,javascript早已超越了当初设定的角色.Javascript由以下三部分组成: 核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模式(BOM) 一.ECMAScript ECMAScript是对Javascript这门语言的描述,它规定了这门语言的这些组成部分:语法.类型.语句.关键字.保留字.操作符.对象.Web浏览器是ECMA