`
desert3
  • 浏览: 2136609 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

JavaScript高级程序设计读书笔记-事件

 
阅读更多
JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件(event)来处理的。

事件流:意味着在页面上可有不仅一个,甚至多个元素响应同一事件。点击页面上面的按钮,会发生什么?实际上,是点击了按钮、它的容器及整个页面。从逻辑上说,每一个元素都按照特定的顺序响应那个事件。事件发生的顺序(也就是事件流)是IE4.0和Netscapse4.0在事件支持上的主要差别。

冒泡型事件:
IE上的解决方案是绰号为冒泡(dubbed bubbling)的技术。冒泡型事件的基本思想是,事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
IE6下的冒泡过程如下图:

Mozilla 1.0下的冒泡过程如下图:


捕获型事件:
Netscape Navigator4.0使用了捕获型事件(event capturing)。事件的捕获和冒泡刚好是相反的两种过程。捕获型事件中,事件从最不精确的对象(document对象)开始触发,然后到最精确的对象。

DOM流事件:
DOM同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件都会触及DOM中的所有对象。

事件处理函数/监听函数:用于响应某个事件而调用的函数称为事件处理函数(event handler)或者DOM称之为事件监听函数(event listener)。事件处理函数有两种分配方式:在JavaScript中通过对象属性的方式设置或者在HTML中通过元素属性的方式设置。

为每个可用事件分配多个函数:
IE:在IE中,每个元素和window对象都有两个方法:attachEvent()和detachEvent()。attachEvent用来给一个事件附加事件处理函数,而detachEvent用来将事件处理函数分离出来。事件处理函数总是按照添加它们的顺序进行调用的(先添加、先调用)
DOM:DOM方法addEventListener()和removeEventListener()用来分配和移除事件处理函数。与IE不同,这些方法需要三个参数:事件名称,要分配的函数和处理函数是用于冒泡阶段还是捕获阶段的标识。如果事件处理函数是用于捕获阶段,第三个参数为true,用户冒泡阶段,则为false。

事件对象:
基于不同浏览器开发的开发人员都知道,获取事件信息是很重要的。事件发生时,会创建包含关于刚刚发生的事件的信息的事件对象,包含的信息有:引起事件的对象,事件发生时的鼠标信息,事件发生时的键盘信息。
事件对象只在发生事件时才被创建,且只有事件处理函数才能访问。所有事件处理函数执行完毕后,事件对象就被销毁。

定位:
在IE中,事件对象是window对象的一个属性event。在事件中,按照var oEvent = window.event;来访问。尽管它是window的属性,event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后,事件对象就销毁。
DOM标准则说,event对象必须作为唯一的参数传递给事件处理函数。所以,在DOM兼容的浏览器(如Mozilla、Safari和Opera)中访问事件对象,要用:var oEvent = arguments[0];或者直接作为参数。oDiv.onclick = function (oEvent) {};

事件的属性和方法:
IE和DOM标准的相似点:
  • 获取事件类型var sType = oEvent.type;
  • 获取按键代码(keyDown/keyUp事件)var iKeyCode = oEvent.keyCode;
  • 检测Shift、Alt、Ctrl键var bShift = oEvent.shiftKey; altKey ctrlKey
  • 获取客户端坐标var iClientX = oEvent.clientX; client
  • 获取屏幕坐标 var iScreenX = oEvent.screenX; screen

IE和DOM标准的不同点:
  • 获取目标IE:oEvent.srcElement   DOM:oEvent.target
  • 获取字符代码
  • 组织某个事件的默认行为IE:oEvent.returnValue = false;   DOM:oEvent.preventDefault();
  • 停止事件复制(冒泡) IE:oEvent.cancelBubble = true;  DOM:oEvent.stopPropagation();


事件的类型:鼠标事件、键盘事件、HTML事件、变化事件(DOM标准事件)
鼠标点击事件的触发顺序:mousedown、mouseup、click、mousedown、mouseup、click、dblclick
鼠标移动事件的触发顺序:mouseout、mousemove、moseover
  • 大小: 61.4 KB
  • 大小: 88.4 KB
分享到:
评论

相关推荐

    javascript 高级程序设计 读书笔记(3)

    NULL 博文链接:https://shaw-n-lu.iteye.com/blog/1881210

    JavaScript高级程序设计 读书笔记之八 Function类及闭包

    Function类 定义 Function类可以表示开发者定义的任何函数,用Function类直接创建函数的语法如下: var function_name=new Function(agrument1,agrument2,…,argumentN,function_body); 每个argument都是一个参数,...

    对javascript的一点点认识总结《javascript高级程序设计》读书笔记

    l ECMAScript,有ECMA-262定义,明确javascript这门语言的规则和约定,好比为开始一场游戏指定的游戏规则、规范、约定。 l DOM:提供访问和操作网页内容的方法和接口 l BOM,提供与浏览器交互的方法和接口 ECMA-262规定...

    JavaScript高级程序设计 读书笔记之十一 内置对象Global

    内置对象 定义:由ECMAScript实现提供的、独立于宿主环境的所有对象,在ECMAScript程序开始执行时出现。 由定义可知开发者不必明确实例化内置对象,它已被实例化了。在ECMAScript-262只定义了两个内置对象,即Global...

    JavaScript高级程序设计 读书笔记之十 本地对象Date日期

    要注意的是在JavaScript中月份的值是从0到11(0表示1月)。 设置日期和时间值 设置日期和时间值有两种方法: 1、只声明距离1970年1月1日凌晨12点的毫秒数 a、直接用距离1970年1月1日凌晨12点的毫秒数 var d=new Date...

    JavaScript高级程序设计 读书笔记之九 本地对象Array

    创建Array对象 代码如下: //one var aValues=new Array(); //two var aValues=new Array(20); //three var aColors=new Array(); aColors[0]=”red”; aColors[1]=”green”; aColors[2]=”blue”;...

    Reading-Notes:读书笔记们

    JavaScript高级程序设计(第三版) You don't know JS 系列 ES6 标准入门 Node.JS深入浅出 图解HTTP HTTP权威指南 Head First Java CSS3揭秘 Linux Command Line 大型网站技术架构核心原理与案例分析 锋利的jQuery ...

    my-blog:自己的博客

    JavaScript深入理解系列读书笔记系列这部分只会记载一些笔记,不会深入解读电子书链接:提取码:wube《你不知道JavaScript》中册《JavaScript高级程序设计》数据结构栈队列链表哈希表树图浏览器部分浏览器的主要进程...

    JavaScript 函数惰性载入的实现及其优点介绍

    最近看JavaScript高级程序设计,大有收获,接下来几天写一下读书笔记。之前写了一篇Ajax初步理解的随笔,里面有个函数用来创建XmlHttpRequest对象,浏览器兼容性原因,写出的代码通过大量if判断或者try,catch语句将...

    Javascript 面向对象 (声明篇)

    由于才疏学浅,我不得不将《Javascript 高级程序设计》中的部分内容摘抄过来,这些同时也算是我的读书笔记吧。由于 Javascript 面向对象机制及其的重要,而且内容非常的繁多,在这里就分篇章逐个介绍。 使用对象首先...

    asp.net知识库

    Essential .NET 读书笔记 [第一部分] NET FrameWork的Collections支持 .NET的反射在软件设计上的应用 关于跨程序集的反射 实现C#和VB.net之间的相互转换 深入剖析ASP.NET组件设计]一书第三章关于ASP.NET运行原理讲述...

    疯狂的java讲义源码-ReadingBooks:读书笔记整理

    《JavaScript高级程序设计(第3版)》 学习JS和前端必读的书籍,比较厚但是很有干货涉及面比较广,里面的重要章节我自己是读了不止一遍。 2、 《ES6标准入门》 阮一峰编着,作者讲事情的思路一向比较清晰,也是学ES6...

Global site tag (gtag.js) - Google Analytics