js笔记.04

1.事件类型

2.获取事件对象

事件对象是对象里有事件触发时的相关信息

该功能可以判断用户按下了哪个键，以及判定鼠标按下了什么元素

在事件绑定的回调函数的第一个参数就是事件对象

一般命名为event,ev或e

3.部分常用的属性

（1）type，获取当前的事件类型

（2）clientX/Y，获取光标相对于浏览器

（3）offsetX/Y,获取光标相对于当前DOM元素左上角的的位置

（4）key,用户按下的键盘3.键的值（现在不提倡用keycode）

4.".trim()"可以去除两侧的空格

例如：console.log(数据..trim())

5.环境对象

每个函数里面都有this,环境对象，普通函数里this指向的就是window

环境对象指的是函数内部特殊的变量this,它指的是当前函数运行时所处的环境

6.回调函数

如果将函数A作为参数传给函数B时，我们称函数A为回调函数

7.事件流

事件流是指时间完整执行过程中的流动路径

8.事件捕获

事件捕获是指从DOM的根元素开始去执行对应的事件

事件捕获需要写相应的代码才能看到效果

9.事件冒泡

当一个元素的事件被触发时，同样的事件会在该元素的所以祖先元素中触发，这一过程被称为事件冒泡（就是当一个元素触发事件后，会依次向上调用所有父级元素的同名事件）

事件冒泡默认存在

L2事件监听的第三参数是false,或者默认都是冒泡

10.阻止冒泡

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

若想把事件限制在当前元素内，就需要阻止冒泡

想阻止冒泡需要拿到事件对象

此方法可以阻断事件流动传播，不光在冒泡阶段有效，在捕获阶段也同样有效

11.解绑事件

addEventListener方式，必须使用removeEventListener(事件类型，事件处理函数，[捕获或者冒泡阶段])，例如：

#匿名函数无法被解绑

12.鼠标经过事件

mouseover和mouseout会有冒泡效果

mouseenter和mouseleave没有冒泡效果

通常推荐第二种写法

13.事件委托

事件委托可以减少注册次数，提高程序性能

给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素事件

事件对象.target.tagName 可以获得真正触发元素的事件的元素

14.阻止冒泡

在某些情况下需要阻止默认行为地1发生，如链接的跳转。

15.页面加载事件

等待外部资源加载完毕时触发的事件

事件名：load

监听页面所有资源加载完毕：给window添加load事件

当初始的HTML文档被完全被完全加载或解析完成之后DOMcontentLoaded事件就会被触发，且无需等待样式表，图像等完全加载

事件名：DOMcontentLoaded

监听页面DOM加载完毕

给document添加DOMcontentLoaded事件

16.页面滚动事件

滚动条在滚动时持续触发的事件

事件名：scroll

(1)获取位置

获取位置使用的是scrollLeft和scrollTop（属性）

可以获取被卷去的大小

获得的是往左或往上滚出去看不到的距离

这两个值是可读写的

尽量在scroll事件中获取被卷去的距离

17.页面尺寸事件

页面尺寸事件就是在窗口尺寸发生改变时会触发的事件

语法：resize

检测屏幕宽度：

获取宽高：

获取元素的可见部分宽高（不包含边框，margin，滚动条等）

语法：clientWidth和clientHeight

获取元素尺寸于位置——尺寸：

获取元素的自身宽高，包含元素自身设置的宽高，padding,border

语法：offsetWidth和offsetHeight

获取位置：

获取元素距离自己定位父级元素的左，上距离

offsetWidth和offsetHeight只读属性

18.日期对象

日期对象是用来表示时间的的对象

它可以得到当前时间

（1）实体化

在代码中有new这个关键字之后，会创建一个时间变量并获取当前时间

获得指定时间

（2）日期对象方法

因为日期对象返回的数据我们没法直接使用，所以在开发中要转化为常用的格式

（3）时间戳

如果要计算倒计时效果，前面的方法无法直接计算，需要借助时间戳来完成

算法：将来时间戳减去现在时间戳就是剩余毫秒数

剩余毫秒数转化为剩余时间的年月日时分秒就是倒计时时间

比如将来时间戳2000ms减去现在时间戳1000ms=1000ms

1000ms转换就是0时0分1秒

三种获得时间戳的方法

1.使用getTime()方法

2.简写+newDate()（无需实体化）

3.使用Date.now()

无需实体化（但只能得到当前的时间戳，但前面两种可以返回指定时间的时间戳）

19.DOM节点

DOM树里每一个内容都被称之为节点

节点类型：

元素节点（所有的标签，如body,div。html是根节点）

属性节点（所有的属性，如href）

文本节点（所有的文本）

其他

（1）查找节点

父节点查找：

parentNode属性

返回最近一级的父节点，找不到返回为null

兄弟节点查找：

下一个兄弟节点:nextElementSibling属性

上一个兄弟节点:previousElementSibling属性

(2)增加节点

很多情况下，我们可能会在页面中增加一条元素，这时，就需要新增一个节点

创建节点：就是新创建一个网页元素，再添加到网页，一般先创建一个节点，再插入节点

语法：

追加节点：想在页面中看到，还得插入到某个父元素当中

插入到父元素最后一个子元素

插入到某个子元素前面

克隆节点：特殊情况下，我们新增一个节点，会先复制一个1原有的节点，再把被复制的节点放入到指定元素内部

cloneNode会克隆出一个跟源标签一样的元素，括号内传入布尔值

若为true,则代表克隆时会包含后代节点一起克隆

若为false,则代表克隆时不包含后代元素

默认false

删除节点：若一个节点在页面中不需要时，可以删除它

在JS原生DOM操纵中，要删除元素必须要通过父元素删除

语法：

#如果不存在父子关系则删除不成功