关于函数、dom、事件三部分学习的总结

自我学习状态：

  自我感觉这三部分学的很差，可能跟自己的学习状态有关，光会整理笔记了，效率太低，函数部分一知半解，调用、作用域等不能有清楚的认知。dom、事件两部分就真的是完全摸不着头脑，面对一个任务时，没有任何的思路和布局思想，脑子完全属于空白状态；在看相关代码时大多会看不出、看不懂代码所代表的意思。

   希望有大佬能够分享一下自己的经验及学习这几部分的心得和技巧。比心！

接下来就是这几部分的知识梳理：

涵数：

一、含义：

输入一些内容，经过函数处理，输出一些内容

特点：函数里面会封装一些代码，可以重复使用

二、函数的声明

1、语法：function（关键字）函数名（自定义的标识符）小括号（里面放传入的参数（形式参数）） 大括号{ }

2、声明函数之后，类似于定义好一个变量，需要去使用

3、调用函数 语法：函数名（）；

4、作用域：

（1）全局作用域：<script>标签内，称做全局作用域

（2）全局变量，在全局作用域内都可以使用

（3）局部作用域：函数的大括号内就是局部作用域

（4）在局部作用域内声明的变量被称作局部变量

注：规则：全局作用域内不可以使用局部变量，会出现未定义错误
局部作用域内可以使用全局变量，会修改全局变量的值

三、立即执行函数

（1）没有函数名（匿名函数）

（2）函数定义被小括号包裹

（3）立即执行函数会形成一个单独的作用域，我们可以封装一些临时变量或者局部变量，避免污染全局变量

 dom（doncument object model 文档对象模型）

一、

代码世界里，除了有基本数据类型，还有对象

对象是一种复杂的数据结构：由属性和函数组成

二、节点的分类

1、整个文档是一个节点

2、每一个html是一个元素节点

3、html元素内的文本是文本节点

4、属性节点

5、注释节点

三、如何获取节点

1、根据元素的id值获取元素，因为id是唯一的，获取的是单个元素
语法：document.getElementById("id值")

2、根据元素的class值，因为class值可以赋值给多个元素，所以这种方法获取的是元素数组，数组内存放的是元素节点对象
document.getElementsByClassName("class值")

3、根据标签获取元素，因为标签可能重复，所以这种方法返回的也是元素数组
document.getElementsByTagName(“标签名称”)

4、根据选择器获取元素
document.querySelectorAll("选择器")

5、根据name属性值
因为name的值可以重复，所以这个方法返回也是元素组

四、获取页面元素后

1、可以修改标签内的文本
通过对象.innerHTML的方式可以修改元素的文本

2、可以修改标签的属性
通过对象.属性名的方式修改属性值
通过对象.setAttribute（要修改的属性名称，修改后的属性值）

3、直接通过元素的style属性，例如： p.style.backgroundColor = "red"

注意：当通过上面方法获取或修改元素样式时，属性名称和定义的元素属性名称有区别。

五、dom操作：

1、增加页面元素
使用js代码创建一个页面元素
doument.creatElement(元素标签名)
返回创建好的节点

2、将元素添加到文档流中
（1）父元素.appendChild(子元素)；
需要找到父元素，如果没有父元素，可以使用body作为父元素
向父元素中最后添加子元素
    在某个元素前面插入新的元素：
（2）父元素.insertBefore(待插入的子元素，被插队的子元素)

3、删除页面元素
父元素.removeChild()

事件：

一、含义：

用户与浏览器的互动

二、常用的事件：

1、鼠标点击

2、键盘事件

3、滚轮事件

4、聚焦事件

5、失焦事件

三、绑定事件的语法

元素.事件=触发函数

四、onmousemove事件

事件会在鼠标指针移到指定的对象时发生
语法：元素.onmousemove=触发函数

五、event对象

事件触发时，浏览器会将一个事件对象event当作实参传入响应函数

六、事件冒泡

当后代元素事件被触发时，祖先元素的相同事件也会被触发
通常情况下，冒泡是需要的，一般吧做处理，但是也会有特殊情况
如果需要事件不冒泡
使用event对象的cancel Bubble属性：值是布尔类型

七、事件的委派

将事件统一绑定给元素共同的祖先元素（后代元素事件触发时，通过冒泡，通过祖先元素的响应函数来处理事件），这样可以只绑定一次，即可应用到多个元素上。事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能event中的target表示的触发事件的对象 ，使用它对触发事件的元素进行判断。

八、事件绑定的新法

1、可以给同一个元素添加多个不同的事件
     可以给同一个元素添加多个相同的事件
     语法：元素对象.addEventListener（）

2、特点：给相同元素添加多个相同点击事件时，不会覆盖前面的事件

3、参数：1、事件字符串，而且字符串内没有on
          2、事件触发的回调函数
          3、是布尔值，是否在事件捕获阶段执行触发函数，默认是false

九、事件的传播
一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。

第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）

第二阶段：在目标节点上触发，称为“目标阶段”（target phase）

第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）