【web】JavaScript——Web APIs笔记小结 dom 样式属性（dom+事件）

  在学了在学了qwq 

每天都被周围的卷王带着卷orz  

  又又又鸽了一个多月没学习呜呜orz  

期末考成绩出了决定这学期痛改前非qwq  

 还有一周就蓝桥杯了qwq得赶紧收心学习了啊啊啊！ 

来源：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts

目录

⑥ 三种动态创建元素区别

※※ document.write()

※※ element.innerHTML和document.createElement()

I.DOM 重点核心

II.事件

① 注册事件(绑定事件)

※※ 传统和方法监听注册方式概述 

※※※※ addEventListener 事件监听方式（推荐）

※※※※ 代码

 ※※ attachEvent 注册事件（ie9前支持，不推荐用）

 ※※※※代码

② 删除事件

※※ 兼容性方案

※※ 代码

③ DOM 事件流 

※※ 理论部分

※※ 代码验证

 ※※※※ 完整代码

④ 事件对象

※※ 概念

※※ 使用语法

※※※※ 兼容性方案 

※※ 代码部分 

⑤ 常见属性和方法

※※ e.target 和this的区别 

※※※※ 返回的东西不同

 ※※※※ currentTarget

※※ 阻止默认行为

※※ 阻止事件冒泡

※※ 代码（两种方式） 

※※ 事件委托（代理、委派）

※※※※ 理论

※※※※ 代码

⑥ 常用鼠标事件

※※ 禁止右键菜单/选中文字 

※※ 鼠标事件对象

※※ 案例 跟随鼠标的天使（略过）

⑦ 常用键盘事件

※※ 类型

※※ 案例 模拟京东按键输入内容（略过）

---

⑥ 三种动态创建元素区别

这一部分建议看一下视频，个人感觉视频里的比较清晰owo

※※ document.write()

下面两种代码的效果相同

    点击
    
abc
    

    

    

window.onload = function() {
    document.write('
123
');
}

※※ element.innerHTML和document.createElement()

创建少量元素差别不大，但多个元素时，innerHTML 效率更高

I.DOM 重点核心

dom的元素操作主要有创建、增、删、改、查、属性操作和事件操作

①创建 → document.write()、innerHTML、createElement()

②增 → appendChild、insertBefore

③删 → removeChild

④改

⑤查

⑥属性操作

⑦事件操作

 忘了的戳这 → 增删，其他的可能在别的博客里Orz

II.事件

① 注册事件(绑定事件)

※※ 传统和方法监听注册方式概述 

※※※※ addEventListener 事件监听方式（推荐）

※※※※ 代码

 ※※ attachEvent 注册事件（ie9前支持，不推荐用）

MCD上没搜到pink这个界面orz

 ※※※※代码

② 删除事件

※※ 兼容性方案

※※ 代码

③ DOM 事件流 

※※ 理论部分

  即：捕获 → 从上往下  ，冒泡 → 从下往上  

※※ 代码验证

 ※※※※ 完整代码

    
    
    
    
    



    

        
son盒子
    
    

④ 事件对象

※※ 概念

※※ 使用语法

※※※※ 兼容性方案 

※※ 代码部分 

    
123
    

⑤ 常见属性和方法

※※ e.target 和this的区别 

※※※※ 返回的东西不同

e.target → 返回的是触发事件的对象 / 元素

this → 返回的是绑定事件的对象 / 元素

 ※※※※ currentTarget

与this很相似，都 指向实际绑定的事件

※※ 阻止默认行为

※※ 阻止事件冒泡

※※ 代码（两种方式） 

※※ 事件委托（代理、委派）

※※※※ 理论

※※※※ 代码

⑥ 常用鼠标事件

※※ 禁止右键菜单/选中文字 

※※ 鼠标事件对象

page常用，screen不常用

※※ 案例 跟随鼠标的天使（略过）

⑦ 常用键盘事件

※※ 类型

※※ 案例 模拟京东按键输入内容（略过）

---

  时间不够只能略过案例了呜呜呜，每周都在赶ddl啊啊啊  

  要准备开始刷题了呜呜  

  要努力卷起来啊！ 

恭喜看到这的小伙伴，你已经完成 JavaScript 中 DOM 部分的学习了~！！

 接下来我准备直接开始准备蓝桥杯了qwq，下周二还有个省赛选拔要打啊啊啊 

 祝我好运T^T 

有用的话欢迎点赞评论收藏哦嘿嘿嘿~ ！