复习
1.冒泡机制
(1)当子元素上发生事件时, 可以传递其父元素
(2)事件委托:
- 通过父元素帮助子元素完成事件
- 适合场景: 动态新增的子元素
(3)事件参数
- target: 此属性存储触发事件的
当事元素
- stopPropagation: 阻止冒泡事件
2.阻止默认事件: 事件参数中的 preventDefault
. 主要用于超链接
3.鼠标点击的事件参数, 几组坐标值
- screenX, screenY: 相对屏幕左上角
- x, y: 相对浏览器内容区域的左上角
- offsetX, offsetY : 相较于点击事件发生的当事元素左上角
4.页面滚动事件: onscroll
- 读取偏移量:
document.documentElement.scrollTop || document.body.scrollTop
5.属性的旧版本操作
- getAttribute: 获取某属性的值
- setAttribute: 设置某属性的值
6.JS方式创建DOM元素
(1)追求极致性能: 放弃用HTML代码来书写, 直接用JS代码
document.createElement(标签名)
(2)文档片段: 提高 遍历创建DOM元素时的性能消耗
把遍历生成的DOM的元素先放在片段里, 最后把片段放到页面上
7.DOM的封装(选修
)
- 利用函数的封装技巧, 把原生DOM进行了简化.
document.querySelectorAll
->$
- 提供了更多的原型方法, 自动实现遍历
- 这套思想就是
jQuery
的封装思想
-
-
这套思想就是
jQuery
的封装思想
-
DOM的套路就两点:
先找到要操作的元素
多个元素, 则需要遍历
操作元素的属性
一、BOM
B
rowser O
bject M
odel: 浏览器对象模型
-
用于操作浏览器上的各种属性
二、打开新页面
三、地址栏操作