DOM事件

一、事件级别

DOM0

element.onClick = function(){}

DOM2

element.addEventLisenter('click', function(){}, false);

DOM3    增加了多种事件类型

element.addEventListener('keyup', function(){}, flase);

二、事件模型

捕获    自上而下

冒泡    自下而上

三、事件流

事件捕获阶段(capture phase)

处于目标阶段(target phase)

事件冒泡阶段(bubbling phase)

四、事件捕获具体流程

window → document → html → body → parent → child → target

五、Event对象常见应用

event.preventDefault();    //阻止默认事件

event.stopPropagation();    //阻止冒泡

event.stopImmediatePropagation();    //事件响应优先级

event.currentTarget;   //当前绑定事件的元素,一般在事件委托时事件绑定在父元素

event.target;    //当前被点击的元素

六、自定义事件

var event = new Event('custome');

element.addEventListener('customer', function(){

    console.log('custome');

});

element.dispatchEvent(event);

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • dom对象的innerText和innerHTML有什么区别? innerHTML指的是从对象的起始位置到终止位置...
    coolheadedY阅读 3,398评论 0 0
  • DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM 0 级事件是基于元素内联属性或DOM元素命名的...
    邢烽朔阅读 2,701评论 0 0
  • 一、dom对象的innerText和innerHTML有什么区别? innerHTML返回的是从对象起始位置到终止...
    __Qiao阅读 3,106评论 0 0
  • 相信刚入考研坑的小伙伴们,都会有这种心理:看到别人手里拿着自己不知道的参考书默想“卧槽,这本书是不是很重要,是不是...
    圈圈甜甜阅读 3,017评论 0 1
  • 大概9点醒来,赖床近一小时。这是,周末的意义? 最近很纠结未来,马上就,大三了呀。倾泻的窗口换了一个又一个,很多东...
    宇宙黑洞ING阅读 695评论 0 0