10.第13章:事件

1.事件流:描述从页面接收事件的顺序。IE提出冒泡流,Netscape提出捕获流。

1.1 事件冒泡

事件开始时由最具体的元素(嵌套最深)接收,然后逐级向上传播到最外层节点(文档)。



1.2 事件捕获

从最外层不太具体的节点收到事件,传递给最内层的具体的节点。



1.3.DOM事件流

事件捕获阶段、目标阶段、事件冒泡阶段



捕获阶段:事件从ducument->html->body
目标阶段:事件在div上发生。在事件处理中被看成冒泡阶段的一部分。
冒泡阶段:事件传回document

2.事件处理

2.1.HTML事件处理

指定onclick属性:



缺点:时差问题、扩展事件处理程序的作用域链在不同浏览器有不同结果、HTML和JavaScript代码耦合。
摒弃此种方法,使用JavaScript指定时间处理程序。

2.2.DOM0级事件处理

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



2.3.DOM2级事件处理

定义了两个方法:添加事件addEventListener() 删除事件 removeEventListener()
接收三个参数:要处理的事件名、作为事件处理的函数、布尔值。
布尔值为true,表示在捕获阶段调用事件处理
布尔值为false,表示在冒泡阶段调用时间处理



使用addEventListener()添加的事件处理程序,只能用removeEventListener()移除,移除的参数与添加参数相同,通过addEventListener()添加的匿名函数将无法移除。




重写之后可以移除

可用的浏览器:
2.4.IE9之前版本事件处理

IE实现和DOM2事件处理类似的两个方法
attachEvent()和detachEvent()。
接收两个参数:事件名称,事件处理函数。IE8及之前版本只支持事件冒泡,所以不需要第三个参数。
注意:在IE中使用attachEvent()的作用域是全局作用域,this等于window。



使用attachEvent()添加的事件,只能使用detachEvent()来移除,同样参数必须相同。


图片.png
2.5.跨浏览器的事件处理

定义了两个方法addHandler和removeHandler()
接收三个参数,元素,事件类型,事件处理方法。
首先判断有没有DOM2的方法
没有再判断有没有IE的方法
没有就使用DOM1,这里直接给元素添加了属性。


3.事件对象

3.1 DOM中的事件对象

兼容DOM的浏览器都会将event对象传入到事件处理程序中。



在需要一个函数处理多个事件时,可以使用type属性。


  • 阻止特定事件的默认行为


  • 停止事件在DOM层次的传播,只会弹出一次警告框,body上的被禁止传播。


  • 事件对象的eventPhase属性:确定当前事件位于事件流的那个阶段。捕获1,目标处理2,冒泡3。


3.2 IE中的事件对象

访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。
i)DOM0级方法添加事件处理程序
event对象作为window属性存在



ii)DOM2,使用attachEvent(),就会有一个event对象作为参数被传入事件处理函数。


  • 取消给定事件的默认行为,与DOM中preventDefault()方法作用相同。


  • 停止事件冒泡,与DOM中stopPropagation()方法作用相同。


3.3 跨浏览器事件对象

4 事件类型

4.1 UI事件
  • load事件
    当页面完全加载后在window上出发,当体香加载完在img元素上触发。
    i)window上的事件有如下两种方式:




    ii)img的load事件



  • unload事件
    文档完全被卸载时触发。用户从一个页面切换到另一个页面会触发。



  • resize事件
    当浏览器窗口被调整到一个新的高度或宽度时,会触发resize事件。


  • scroll事件



    以上代码输出页面垂直滚动位置

4.2 焦点事件

会在页面获得或失去焦点时触发。


4.3 鼠标与滚轮事件

  • 客户区坐标位置
    相对于浏览器窗口的位置:clientX,clientY


  • 页面坐标位置
    判断在页面中的位置,从页面本身而非视口的左边和顶边计算的。pageX,pageY。没有滚动时与clientX,clientY相等。


  • 屏幕坐标位置
    相对于整个电脑屏幕的位置:screenX,screenY


  • 四个修改键


4.4 键盘与文本事件

三个键盘事件




1)键码
发生keydown和keyup事件时,event对象的keyCode属性会包含一个代码,与键盘上一个特定的键对应。



2)字符编码
如果按下的是字符,使用charCode属性获取值。

3)textInput事件
用户在可编辑区输入字符时,触发该事件。



用户按上档键和s,data值为S
没有按上档键,data值为s

5.内存和性能

5.1事件委托

对于事件处理程序过多的问题解决方案就是事件委托,利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。



要给所有的li添加事件,只需要为ul添加一个事件。


2.移除事件处理


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 5,030评论 3 11
  • JavaScript 与 HTML 之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬...
    threetowns阅读 2,773评论 0 0
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 7,259评论 0 2
  • 本章内容 理解事件流 使用事件处理程序 不同的事件类型 JavaScript 与 HTML 之间的交互是通过事件实...
    闷油瓶小张阅读 2,187评论 0 0
  • “大概就是因为不停地在遇到能让自己有勇气继续走向未来的人,所以生命才有了更完整的意义。从此不再囿于旧日的阴雨,也不...
    豫悦和谦阅读 1,517评论 0 0

友情链接更多精彩内容