js-事件知识点小结

概念理解

• 事件的定义：用户与浏览器产生的交互行为（点击、滚动鼠标、键盘操作...
• 事件句柄：选择监听特定事件并在这些事件发生后进行相应处理
• 事件流：事件的响应流程（冒泡、目标、捕获）
• 事件处理方式：给元素添加事件的方式，又称事件句柄、事件侦听器、事件处理程序
• 事件注册：事件绑定在某个元素上

 

绑定事件的方式

事件处理程序

• 指定为HTML元素的属性
  • 优点：元素载入的同时被设定事件，而其他方法绑定事件是在js中绑定，没执行到绑定代码前事件发生也不会触发事件句柄
  • 缺点：强耦合，代码复用性低
  • 注意
    • 虽然html不区分大小写，但在XHTML区分大小写，为了提高兼容性建议小写
• 指定为DOM元素的属性
  • 优点：js和html分离，提高可维护性
  • 注意事项
    • 事件名称必须小写
    • 指定的事件处理程序必须是匿名函数或函数名
    • 会覆盖html指定的事件
• 注意事项
  • 当事件处理程序返回false时取消事件默认行为，如submit事件，在校验表单内容时发现问题可返回false取消数据发送

 

　　　　<a href="" onclick="return stop();"></a> 

事件侦听器（DOM2级事件）

• 优点
  • 一个元素能同时绑定多个侦听器
  • 能控制是在捕获阶段还是在冒泡阶段开始执行处理函数
• 注意事项
  • 在DOM level 2中第三个参数必须，在level 3中定义为省略则默认false
  • IE中没有第三个参数，程序总是在冒泡阶段执行处理函数
  • 虽然在DOM Level 3中将执行顺序规定为与绑定顺序相同，但仍建议和执行顺序相关的处理放在同一个侦听器中（不同浏览器规则有所不同）
  • 相同的事件侦听器只有前面的生效
    • 　opera浏览器后面绑定的生效
  • 某些浏览器可将含有handleEvent方法的对象指定为侦听器（虽然浏览器大多都支持，但与DOM定义略有违背

事件处理程序和事件侦听器比较

　　一个元素只能绑定一个事件处理程序，而事件侦听器能绑定多个，且事件侦听器支持冒泡和捕获。

 

操作事件的流程

1、谁被监督？（元素）

谁需要被监督？你？你爸爸？你儿子？

2、监督什么？（触发事件：点击、键盘按下..、鼠标...）

需要监督的行为？玩手机？打游戏？熬夜？
3、怎么监督？（绑定方式）

需要对方如何监督你？云监督？24小时跟随？
4、惩罚？（处理函数）

监督约定：当行为发生后该怎么办？火烧？碳烤？给ta头上加个buff？

 

事件的传播：捕获阶段---->目标阶段---->冒泡阶段

　　虽然可通过参数确定事件传播机制，但传播流程始终存在，参数选择冒泡还是捕获的区别仅在于在哪个阶段开始执行处理函数，例如参数为true意味着在捕获阶段中，遇到的侦听器都会执行，目标阶段结束后则不再执行遇到的侦听器。

　　需要注意的是父元素的事件能被子元素触发。

 

取消事件的传播

• event.stopPropagation()与event.stopImmediatePropagation()
• 区别：stopImmediatePropagation()在DOM level 3新引入，不仅阻止事件传播，而且当前对象上绑定的其他待执行侦听器也将停止执行。

 

常用事件类型与常用事件

• 资源事件
  • load
    • css、js动态加载
    • 资源预加载
  • unload
• 值变化事件
  • hashchange：地址栏#号后值发生变化触发
• 视图事件
  • resize
  • scroll
• 焦点
  • focus
  • blur
• 鼠标事件
  • click / dbclick
  • mousedown / mousemove /mouseup
  • mouseover / mouseout && mouseenter / mouseleave ：区别在于是否能被子元素触发
• 键盘事件
  • keydown / keypress / keyup
• 触摸事件
  • touchstart
  • touchmove
  • touchend
• 存储事件
  • change
• 表单事件
  • submit
  • reset
• DOM变异事件
  • DOMContentLoaded（面试题）　　　　           
    • 纯html被加载完并解析后触发，但js同步代码会导致阻塞，使DOM解析暂停，而当文档中同时存在css时，又必须等待CSSOM生成后才能执行js，意味着实际上是html和js加载完才能触发
    • jQuery 中的 $(document).ready()监听的就是此事件。 
    • 首屏时间（衡量网页加载速度）：页面从空白到显示内容花费的时间？
      • DOMContentLoaded被触发前的时间。
      • js文件放在开头和结尾并不会影响首屏时间，只是为了更能保证找到DOM节点。

 

思考

• 事件的意义

　　　　Web应用程序通过事件驱动程序设计的方式实现功能。

• 事件侦听器那么好，那么所有情况只需要用它就可以了吗？DOM0级事件没存在意义了吗？该如何选择？

　　　　新技术取代了旧技术但不代表不能用旧技术，条件允许情况下尽量用新技术，否则可降低标准使用旧技术。DOM0级事件虽比不上2级事件，但可用于兼容性问题处理。

• 通过js给DOM元素添加事件为什么叫DOM0级事件？

　　　　因为这种方法是在DOM Level 0中定义的

• 事件侦听器为什么叫DOM2级事件？为什么不叫1级事件？

　　　　因为事件侦听器这个方法是在DOM level 2中定义的方法，在DOM Level 1中没有定义与事件相关的内容。

•  事件冒泡和捕获有什么意义？　　

　　　　为了实现事件委托：利用冒泡，间接触发事件，不在自身身上添加事件，节省性能

•  图片预加载到底优化体现在哪？

　　　　要分预加载的方案选择：1、按需加载：先对主要内容进行加载，视图外的内容等用户浏览到时再加载，减少带宽压力。2、缓存：将下载内容缓存到本地，下次浏览时直接从本地获取资源