DOM事件相关
目录：
- DOM事件基本概念： DOM事件的级别
- DOM事件模型： 冒泡 和 捕获
- DOM事件流
- DOM事件捕获的基本流程
- Event对象的常见应用
- 自定义事件
1、DOM事件级别（或DOM标准的事件级别）
- DOM0 : element.onclick = function () { }
- DOM2 : element.addEventListener ( ‘click’ , function () { } , false ) // 第三个参数默认为false(冒泡阶段触发)，如果为true，表示该事件在捕获阶段触发
- DOM3 : element.addEventListener ( ‘keyup’ , function () { } , false ) // 比DOM2事件类型增加了很多，如鼠标事件、键盘事件等等
2、事件模型 : 冒泡 和 捕获
- 捕获 ： 从上往下
- 冒泡 ： 从下往上
3、事件流
浏览器在当前页面与用户之间做交互的过程
事件流分为三个阶段： (1)捕获， (2)目标阶段，事件通过捕获到达目标元素，(3)冒泡，从目标元素上传到window对象(冒泡的过程)
4、DOM事件捕获的具体流程
第一个接收事件的对象是 window，第二个对象是document，第三个对象是html标签(js中获取html标签的方法:document.documentElement 节点对象)，然后是body对象，最后按照html结构一层一层往下传递，到达目标元素。
5、Event对象的常见应用
(1)event.preventDefault() : 阻止默认事件
(2)event.stopPropagation() : 阻止冒泡的行为
(3)event.stopImmediatePropagation() : 事件优先级 (比如在一个DOM上绑定的两个点击事件，如果不做处理，点击的时候两个事件绑定的函数都会响应并执行，如果在其中一个函数中增加这个event方法，则就会成功阻止另外一个函数的执行)
(4)event.currentTarget() : 当前绑定的元素
(5)event.target() : 当前触发的元素
(举栗： 在for循环中给一个dom子项注册了n多事件，该如何优化？ 用事件代理，把子元素绑定的事件代理都转移到父级元素上，只需要绑定一次事件即可。在相应的时候需要区分具体的响应的子元素， event.target()表示当前被点击的元素，早起IE不支持，用sourceElement ，event.currentTarget()指当前绑定的事件对象，即父级元素)
6、自定义事件(模拟事件)
// 声明自定义事件
// 还有另外一种声明自定义事件 ： var eve = new CustomEvent( ‘custome’, {a: ‘123’, b: ‘456’} ) ， 可以给event事件加一些数据和参数
var eve = new Event( ‘custome’ ) // 还有一种注册事件的方式 new CustomEvent( ‘custome’, object) object是自定义参数
// ev 是dom节点，通过dom2事件注册 ， 绑定事件
ev.addEventListener( ‘custome’, function () { console.log(‘custome’) } )
// 通过ev这个dom出发eve事件
ev.dispatchEvent(eve)
Myth丶恋晨
ゞ 浴缸里的玫瑰
喜欢ヅ旅行
刺骨的言语ヽ痛彻心扉
分手后的思念是犯贱
还没有评论，来说两句吧...