DOM事件知识点

一、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
知识大全

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,568评论 1 11
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,081评论 1 10
  • Call 和 Apply 的区别 语法:function.call(thisObj [, arg1[, arg2[...
    他方l阅读 331评论 0 0
  • Call 和 Apply 的区别语法:function.call(thisObj [, arg1[, arg2[,...
    HeroXin阅读 270评论 0 1
  • 问答 一、dom对象的innerText和innerHTML有什么区别? innerTextinnerText是一...
    婷楼沐熙阅读 429评论 0 0