标签：冒泡 DOM 绑定 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　　　　           
    • 在DOM树结构加载完即触发（页面从空白到显示内容即触发，DOM此时被构建好，可对所有DOM节点操作。
    • 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、缓存：将下载内容缓存到本地，下次浏览时直接从本地获取资源

• DOMContentLoaded为什么比load快？如何忽略资源加载？DOM树加载不也意味着资源加载完成了吗？

　　　　主要是对html文档解析的流程不清晰，DOM树加载完并不意味着资源加载完。

 

 

标签：冒泡,DOM,绑定,js,侦听器,事件,加载
来源： https://www.cnblogs.com/neural-net/p/13476433.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。