【DOM事件高级】

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

DOM事件高级

  • 熟悉事件对象的使用,具备利用操作数组对象渲染
  • 一、事件对象
        • 事件对象是什么?
        • 如何获取?
        • 获取事件对象的一些常用属性
  • 二、事件流
        • 事件冒泡的概念
        • 事件捕获的概念
        • 阻止事件流动
  • 三、事件委托


熟悉事件对象的使用,具备利用操作数组对象渲染

一、事件对象

事件对象是什么?

  • 也是个对象,这个对象有事件触发时的相关信息
  • 例如鼠标的点击事件,事件对象就存了鼠标点在哪个位置等信息

如何获取?

  • 元素.addEventListener(‘事件类型’,回调函数)
    事件绑定的回调函数第一个参数就是事件对象里面的e就是事件对象

获取事件对象的一些常用属性

在这里插入图片描述

二、事件流

在这里插入图片描述

事件冒泡的概念

当一个元素触发事件后,会依次向上调用所有父级元素的同名事件
在这里插入图片描述

事件捕获的概念

从DOM的根元素开始去执行对应的事件(从外到里)
true代表捕获阶段触发,false代表冒泡阶段触发,默认的就是false

阻止事件流动

在这里插入图片描述
鼠标经过事件

  • mouseover 和 mouseout 会有冒泡效果
  • mouseenter 和 mouseleave 没有冒泡效果(推荐)
    在这里插入图片描述
    在这里插入图片描述

三、事件委托

在这里插入图片描述


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部