Javascript-事件总结

高程:第十三章 事件

【事件流】表述的是从页面接收事件的顺序。
1、事件冒泡流:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。所有浏览器都支持。
2、事件捕获:与事件冒泡相反,事件捕获的用意在于在事件到达预定目标之前捕获他,(很少有人用,除非特殊情况)。
3、DOM事件流:分为三个阶段:事件捕获阶段,处于目标阶段(实际的目标接收到事件)和事件冒泡阶段(这个阶段对事件发生应)。

【事件处理程序】即响应某个事件的函数。事件处理程序的名字以on开头。
1、HTML事件处理程序:缺点:首先存在时差问题,第二个缺点是这样的话扩展事件处理程序的作用域链在不同的浏览器中会导致不同结果。第三,HTML与Javascript代码紧密耦合,要改动事件处理程序需改动两个地方。
2、DOM0级事件处理程序:(通过javascript指定事件处理程序)简单,具有跨浏览器优势,首先必须取得一个要操作的对象的引用。每个属性都有自己的事件处理程序,这些属性通常全部小写。例如:btn.onclick=function(){},要删除这个事件处理程序,只需:btn.onclick=null;
3、DOM2级事件处理程序:定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListene().他们接受三个参数(要处理的事件名、作为事件处理程序的函数和一个布尔值)布尔值是true,表示在捕获阶段调用事件处理程序,为false,表示在冒泡阶段调用事件处理程序。这个方法添加事件处理程序的好处在于可以添加多个事件处理程序。执行顺序与添加顺序相同。通过addEventListener()添加的事件处理程序只能使用removeEventListener()移除,她们必须传入相同的参数。大多数情况下,将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览器。
4、IE事件处理程序:两个方法:attachEvent()和detachEvent(),接受两个相同的参数,即事件处理程序名和事件处理程序函数。在使用attachEvent()的情况下,事件处理程序会在全局作用域中进行,这里this=window。同样attachEvent()可以为一个元素添加多个事件处理程序,执行顺序于添加顺序相反。
5、跨浏览器的事件处理程序:方法:addHandler()和removeHandler(),接受相同的三个参数:要操作的元素,事件名称和事件处理程序的函数。

【事件对象】
1、DOM中的事件对象:兼容DOM的浏览器会将一个event对象传入到事件处理程序中。要阻止特定事件的默认行为,可以使用preventDefault()方法。stopPropagation()方法用于立即停止事件在DOM层次中的传播。只有在事件处理程序执行期间,event对象才会存在。
2、IE中的事件对象:在使用DOM0级的方法添加事件处理程序时,event作为window的一个属性存在,如果是通过html特性指定的事件处理程序,可以通过一个名叫event的变量来访问event的对象。因为事件处理程序的作用域是根据指定他的方式来确定的,所以不能认为this会始终等于事件目标,所以使用event.src.Element比较保险。returnValue属性相当于DOM中的preventDefault()方法,用来取消给定事件的默认行为,只需将returnValue的值设置为false。
3、跨浏览器的事件对象:给EventUtil对象添加方法来实现获取对象的信息,getTarget()方法返回事件的目标。preventDefault()方法,stopPropagation()方法在这里同样有用。

【事件类型】
1、UI事件:指那些不一定与用户操作有关的事件。
load事件:当页面加载完后触发-onload。
unload事件:在文档完全卸载之后触发。只要用户从一个页面切换大另一个页面就会触发unload事件,利用这个事件更多的是清用,以避免内存泄漏。同样也可以指定onunload事件处理程序。

resize事件:但浏览器窗口被调整到一个新的高度或宽度时,就会触发这个事件,在window窗口上面触发,可以通过onresize特来指定事件处理程序。scroll事件:在window对象上发生,表示页面中相应元素的变化。在混杂模式下可通过scrollleft和scrolltop来监控到这一变化。
2、焦点事件:获得或失去焦点时触发。
3、鼠标与滚轮事件:click事件用户单击触发,dblclick双击鼠标事件,mouseout鼠标移入事件,mouseover鼠标移出事件。
鼠标按钮:按钮button的属性值,支持DOM版鼠标事件的浏览器还可以通过hasFearture()方法来检测,所以可以再喂EventUtil对象添加getButton方法。
更多的事件信息:detail属性,其中包含一个数值,表示再给订位置上发生了多少次单击,detail书香值从1开始计数,每单击发生后值就增加。altLeft,布尔值,表示是否按下了Alt键,以此类推。
滚轮事件:mousewheel事件,其对应的event对象除包含鼠标事件的所有标准信息外,还包含一个特殊的wheelDelta属性。火狐支持一个名为DOMMouseScroll的类似事件。
4、键盘与文档事件:
三个键盘事件:keydown,按下键盘上的任意键触发的事件,keypress,按下键盘上的字符键时触发,keyup当用户释放键盘上的键时触发。(一般在用户通过文本框输入文本时常见)。
一个文本事件:textInput,在文本插入文本框之前触发。
键码:在发生keydown,keypress事件时,event对象的keyCode属性中会包含一个代码,与键盘上的一个特定的键对应。字符编码:charCode属性。取得字符编码后就可以使用String.fromCharCode()将其转换成实际的字符。
DOM3级变化:不再包含charCode属性。包含两个新的属性:key和char,给event对象添加了getModifierState()方法,接受一个参数,即等于shift、control等的字符串。
textInput事件:当用户在可编辑区域中输入字符时触发。他的event对象中还包含一个data属性,他的值就是用户输入的字符,event对象还有inputMethod属性,表示表示把文本输入到文本框的方式。
5、复合事件:用于处理IME的输入序列(输入法编辑器)
6、变动事件:
删除节点:
插入节点:
7、html5事件
contextmenu事件:上下文菜单,即通过单击鼠标右键可以调出上下文菜单。
beforeunload事件:在浏览器卸载页面之前触发,通过他来取消卸载并继续使用页面。为了显示弹出这个对话框,必须将event.returnValue的值设置为显示给用户的字符串,同时作为函数的值返回。
DOMContentLoaded事件:其支持在页面下载的早期添加事件处理程序。类似于window的load事件。
readystatechane事件:其目的是提供与文档或元素加载状态有关的信息,支持readystatechane事件的每个对象都有一个readyState属性,包括5个值:uninitialized(未初始化),loading(正在加载),loaded(加载完毕),interactive(交互),complete(完成)。

【内存和性能】
事件委托:对“事件处理程序过多”的问题的解决方案就是  事件委托。

【模拟事件】
模拟鼠标事件、模拟键盘事件。

十三章 事件 【总结】
在使用事件时,有必要限制一个页面中事件处理程序的数量,数量太多会导致占用大量内存,页面反应不敏捷,建立在事件冒泡机制之上的事件委托技术,可以有效的减少事件处理程序的数量;建议在浏览器卸载页面之前移除页面中所有的事件处理程序。javascript在浏览器中的模拟事件,为模拟各种有定义的事件提供了方便,通过组合使用一些技术,可以在某种程度上模拟键盘事件。

时间: 2024-10-05 21:08:19

Javascript-事件总结的相关文章

javascript事件委托机制详解

以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点击一个li时实现弹出该li的信息 <ul class="top"> <li>橘子</li> <li>香蕉</li> <li>苹果</li> <li>梨子</li> <li>

JavaScript事件委托的技术原理

如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: <ul id="parent-l

JavaScript事件机制

<script type="text/javascript" src="http://runjs.cn/gist/2zmltkfa/all"></script> [前端培养-作业01]javascript事件机制 1.javascript事件模型 2.e.target与e.currentTarget是干什么的? 3.preventDefault与stopPropagation是干什么的 4.什么是dispatchEvent? 5.说一说事件代

javascript事件委托练习

JavaScript事件代理是一种简单的技巧,通过它你可以把事件处理器添加到一个父级元素上,这样就不需要为每一个元素添加或者删除事件处理器,从而避免了内存泄露或者是遍历节点造成的性能下降. 如果整个页面都采用同样事件流方式,当红色蓝色区域触发相同事件,冒泡法:先处理蓝色区域请求,捕获法:先处理红色区域请求 如果不同层的元素使用的useCapture不同,会先从最外层元素往目标元素寻找设定为capture(捕获)模式的事件,到达目标元素执行目标元素的事件后,再寻原路往外寻找设定为bubbling(

JavaScript事件---事件对象

原文:JavaScript事件---事件对象 发文不易,若转载传播,请亲注明出处,谢谢!   内容提纲: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功能.最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,此外还可以修改一般事件的捕获/冒泡流的函数. 一.事件对象 事件处理函数的一个标准特性是,以某些方式访问的事件对象包含有关于当前事件的上下文信息. 事件处理三

JavaScript事件代理入门

事件代理(Event Delegation),又称之为事件委托.是 JavaScript 中常用绑定事件的常用技巧. 顾名思义,"事件代理"即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务. 为什么要这样做呢? 众所周知,DOM操作是十分消耗性能的.所以重复的事件绑定简直是性能杀手.而事件代理的核心思想,就是通过尽量少的绑定,去监听尽量多的事件. 下面将会用 Zepto 为大家演示怎么实现事件代理. 啊?Zepto是什么? Zepto is a minimalist J

Javascript事件冒泡,没有想象中那么糟糕

Javascript事件冒泡,没有想象中那么糟糕  提到js事件,我们可能第一时间反应的就是“如何阻止事件冒泡”:但是事件冒泡真的是如我们想象的那么糟糕吗? 1. Event 对象  Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 2. 事件句柄 (Event Handlers)  指能够使 HTML 事件触发浏览器中的行为,比如点击(onclick).鼠标悬浮(onfocus)等 3. 什么是事件冒泡  一个对象(event.srcEle

Javascript事件处理程序的3种方式

既然产生了事件,我们就要去处理它,据我了解Javascript事件处理程序主要有3种方式: 1.HTML事件处理程序 即我们直接在HTML代码中添加事件处理程序,如下面这段代码: <input id="btn1" value="按钮" type="button" onclick="showmsg();"> <script>    function showmsg(){        alert(&quo

javaScript事件(五)事件类型之鼠标事件

一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaScript事件(三)事件对象 六.事件对象的公共成员 以上内容见javaScript事件(四)event的公共成员 七.鼠标事件 DOM3级事件中定义了9个鼠标事件. mousedown:鼠标按钮被按下(左键或者右键)时触发.不能通过键盘触发. mouseup:鼠标按钮被释放弹起时触发.不能通过键盘

javaScript事件(三)事件对象

一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 1.认识事件对象 事件在浏览器中是以对象的形式存在的,即event.触发一个事件,就会产生一个事件对象event,该对象包含着所有与事件有关的信息.包括导致事件的元素.事件的类型以及其他与特定事件相关的信息. 例如:鼠标操作产生的event中会包含鼠标位置的信息:键盘操作产生的event中会包含与按下的键有关的信息.