- 基本概念
1.DOM0
element.onclick=function(){}
2.DOM2
element.addEventLinstener('click',function(){},false)
false:表示在事件冒泡时执行
true:表示在事件捕获时执行
3.DOM3
element.addEventLinstener('keyup',function(){},false)
比DOM2新增一些事件类型
- DOM事件类型
事件捕获:从上往下
事件冒泡:从下往上
- DOM事件流
事件捕获-目标阶段-事件冒泡
- DOM事件捕获的具体流程
window->document->html->body->...->具体元素
- Event对象的常见应用
1.event.preventDefault()---->阻止默认事件
2.event.stopPropagation()---->阻止冒泡事件
3.event.stopImmediatepropagation---->阻止剩余的事件处理函数的执行,并防止当前事件在DOM树上冒泡
4.event.currentTarget---->当前绑定事件的元素
5.event.target---->当前触发事件的元素
- 自定义事件
var eve=new Event('test');
element.addEventLinstener('test',function(){})
element.dispatchEvent(eve);
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。