JavaScript08—DOM、事件对象

最新推荐文章于 2022-08-05 11:05:02 发布

Iris_20

最新推荐文章于 2022-08-05 11:05:02 发布

阅读量135

点赞数

分类专栏： javascript 文章标签： js javascript

本文链接：https://blog.csdn.net/Iris_20/article/details/107920022

版权

javascript 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

DOM、事件对象

Dom

Dom对象的样式

设置Dom对象的样式
- dom.style.styleName=""
  - 对象方法，需要将css-字母，替换为大写字母
  - style字符串方式写法，按照原CSS行内样式填写
获取计算后的dom样式
- ie
  - currentStyle
- 非ie
  - getComputedStyle
- 使用时要先判断浏览器
  - var style;
    try{
    style=getComputedStyle(div0);
    }catch(error){
    style=div0.currentStyle;
    }
  - 先尝试第一个，不行就尝试第二个。
  - 之前效率很低，尽量不用，现在浏览器优化了，可以放心使用
拓展：
- Object.assign() 复制对象，浅复制
  - 增添class样式
  - 如果DOM的行内样式有内容，可以通过这个方式获取对应的行内样式。
  - 但如果DOM样式在CSS中，这时候还没有渲染，所以无法计算CSS的样式，这种style是无法获得的
  - 想要获取计算后样式，就需要使用getComputedStyle获取元素的样式

Dom对象常见属性

宽高
- DOM的宽高问题
  - clientWidth clientHeight 客户宽高
    - 计算后宽高=宽高+padding-(如果有滚动条，减去滚动条宽高)
  - offsetWidth offsetHeight 偏移宽高
    - 计算后宽高=宽高+padding+border
  - scrollWidth scrollHeight 滚动内容宽高
    - 如果没有超出等同于clientWidth和clientHeight
    - 如果超出就是实际内容所占的宽高，但是padding没有右侧和下侧
    - 如果超出就是实际内容所占的宽高，但是padding没有右侧和下侧-(如果有滚动条，减去滚动条宽高)
- html和body宽高问题
  - document.body body标签
    - clientWidth clientHeight 客户宽高
      - 实际body的宽度和高度-滚动条宽高
    - offsetWidth offsetHeight 偏移宽高
      - 实际body的宽度和高度-滚动条宽高
    - scrollWidth scrollHeight 滚动内容宽高
      - 实际body中内容的宽高
  - document.documentElement html标签
    - clientWidth clientHeight 客户宽高
      - 当前文档的可视宽高-(如果有滚动条，减去滚动条宽高)
    - offsetWidth offsetHeight 偏移宽高
      - 当前文档的内容宽高-(如果有滚动条，减去滚动条宽高)
    - scrollWidth scrollHeight 滚动内容宽高
      - 当前文档的可视宽高
      - 如果有滚动条，就是实际body撑开的宽高
位置
- DOM的位置问题
  - clientLeft clientTop 客户位置
    - 边线的宽高
  - offsetLeft offsetTop 偏移位置
    - 当前div到父容器左上角的距离（父容器是定位）
    - 和position的left和top是相同的
  - scrollLeft scrollTop 滚动条位置
    - 当前元素的滚动条位置
    - 前面的这些属性都是只读，但是这个是可以修改的
    - div2.scrollLeft=100; 滚动条位置设置
  - getBoundingClientRect() 当前元素到可视窗口左上角的位置
    - console.log(rect);
      - rect.x===rect.left;
      - rect.y===rect.top;
- html和body位置问题
  - html和body的clientLeft ,offsetLeft 不考虑
  - scrollTop、scrollLeft
    - 页面中的滚动是html的scrollTop和scrollLeft控制
    - 早期的浏览器是body控制
    - 考虑兼容一起写，设置同样的值
      - 如：
        document.body.scrollTop=100;
        document.documentElement.scrollTop=100;

事件对象

事件基础

事件
- 是通知和侦听组合完成的
- 先侦听后通知，执行对应的函数
- 部分事件是系统默认事件，这些事件会由系统自动抛发
创建一个事件对象
- 事件类型必须是一个字符串
- 事件的类型必须相同
- 事件侦听的对象和抛发的对象必须相同
- 将事件抛向侦听对象就可以
- 先侦听后抛发

事件原理

捕获阶段
- 从外到里
目标阶段
- 事件锁定对象的最后的目标元素
冒泡阶段
- 从里到外

事件侦听和删除侦听

ie9以上
- 添加事件：element.addEventListener(1，2，3)
  - 1事件类型
  - 2事件回调函数
  - 3布尔值（是否是捕获阶段，默认是false）
    - 布尔值true 捕获，false冒泡
- 移除事件：element.removeEventListener(‘事件名’,事件函数名,事件冒泡/捕获)
ie8及以下
- 添加事件：element.attachEvent(‘on开头的事件名’,事件函数名)
- 移除事件：element.detachEvent(‘on开头的事件名’,事件函数名)
注：
- 事件对象必须是EventTarget或者继承他所产生子类
- 目前只有dom可以做侦听