js1.1

** 学习pink的笔记 **

事件对象

事件对象就存储了鼠标点击了那个位置信息
命名：event 、ev 、e
e.key 用户按下的键盘的值

去除空格

名.trim()去除字符串左右空格

环境对象

环境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境
函数的调用方式不同，this指代的对象也不同
谁调用，this就是谁 是判断this指向的粗滤规则

回调函数

事件流

冒泡事件

当一个元素触发事件后，会依次向上调用所有父级元素的同名事件。
事件冒泡是默认存在的

阻止冒泡

#解绑事件
L0： btn.onclick()
btn.οnclick=“null”
L2: removeEventListener(事件类型，事件处理函数，[获取捕获或者冒泡阶段])
匿名函数无法解绑
组织冒泡
事件对象.stopPropagation()
组织元素默认行为
e.preventDefault()

事件委托

好处：减少事件注册次数，提高程序性能
事件对象.target.tagName

其他事件

页面加载事件

window. addEventListener(‘load’,function){}
等页面加载完成再执行
document.addEventListener('DOMContentLoaded,function){}
无需等待样式表、图像等完全加载就执行。

页面滚动

window.addEventListener(‘scroll’,function(){})
页面滚动scroll

• 获取位置
  scrollLeft被卷去左部
  scrollTop被卷去头部 这两个值可读写 （能获得值也能赋值）

scrollTo (x,y)

语法 document.documentElement
获得html

页面尺寸

window.addEventListener(‘resize’,function(){})
浏览器窗口尺寸发生变化触发的事件
clientWidth和clientHeight 获取元素宽和高（不包含边框，margin，滚动条等）

元素尺寸于位置-尺寸
offsetWisth和setHeight 获取元素自身宽高、padding、border 获取数值方便计算
获取元素距离自己定位的父级元素的左右距离
offsetLeft和offsetLeft 只是读取属性

element.getBoundingClienRect()
方法返回元素的大小及相对于视口的位置

scroll-behavior ：smooth
页面丝滑滚动

日期对象

• 可得到当前日期 new Date()
  再小括号内添时间 得到指定时间

• 日期对象方法
  月份+1
  
  另一种写法
  date.toLocaleString()

• 时间戳
  **是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种计量时间的单位

计算倒计时就用时间戳

算法：将来的时间戳-现在的时间戳=剩余时间的毫秒数 转换为剩余时间就是倒计时

获得方法：

1. getTime（）

2. + new Date（）
   

3. Date.now（）只能得到当前的时间戳

转换公式：
d=parseInt:(总秒数/60/60/24)；天数
h=parseInt:(总秒数/60/60%24)；小时
m=parseInt:(总秒数/60%60)；分数
s=parseInt:(总秒数%60)；秒数

节点操作

• DOM节点
  元素节点、属性节点、文本节点
• 查询节点
  子元素.parentNode 返回一级的父节点 找不到返回null
  父节点.children 返回多有元素节点 返回是一个伪数组

兄弟查找： 下一个nextElementSibing
上一个preiousElemntSibling

• 增加节点
  创建节点：document.creatElement(‘标签名’)

• 追加节点 ： 父元素.appendChild(要插入的的元素)

• 插入到某个子元素的前面 ：父元素.insertBerfore(要插入的元素，在那个元素前面)

• 克隆节点 ：元素.cloneNode(布尔值) true 则代表克隆时会包含后代节点一起克隆 false则代表不包含后代节点 默认为false

• 删除节点 ： 父元素.removeChild(要删除的元素) 注：如果不存在父子关系则删除不成功

M端事件

js插件

swiper