DOM事件—面试知识点
2019-09-26 本文已影响0人
Aniugel
一、dom事件类
1、基本概念:dom事件的级别
(1)dom0 element.οnclick=function(){}
(2)dom2 element.addEventListener(‘click’, function(){}, false) // 默认是false。false:冒泡阶段执行,true:捕获阶段产生。
(3)dom3 element.addEventListener(‘keyup’, function(){}, false) // 事件类型增加了很多,鼠标事件、键盘事件
2、dom事件模型
捕获:从上到下
冒泡:从当前元素往上
3、dom事件流
浏览器在为当前页面与用户交互的过程中,比如说点击鼠标左键,左键怎么传到页面上,这就是事件流,他又是怎么响应的。
捕获-> 目标阶段->冒泡
4、描述dom事件捕获的具体流程
window-> document-> html-> body-> … -> 目标元素
document.documentElement();获取到html
document.body获取到body
5、event对象的常见应用
event.preventDefault(); // 阻止默认行为,阻止a链接默认的跳转行为
event.stopPropagation(); // 阻止冒泡
event.stopImmediatePropagation(); // 按钮绑定了2个响应函数,依次注册a,b两个事件,点击按钮,a事件中加event.stopImmediatePropagation()就能阻止b事件
event.currentTarget // 早期的ie不支持,当前绑定的事件
event.target
6、自定义事件/ 模拟事件
(1)给一个按钮自己增加一个事件,在其他地方触发,而不是用回调的方式触发
var ev = document.getElementById('ev');
var eve = new Event('custome'); // eve:事件对象
ev.addEventListener('custome', function(){
console.log('custome');
});
ev.dispatchEvent(eve);
(2)customeEvent
知识大全