JS学习笔记（7. 事件）

1. 事件类型

常用事件

鼠标事件：click(点击),dblclick(双击),mousedown(按下),mouseenter(移入),mouseleave(移出),

moursemove(移动),mouseout(移出), mouseover(移入),mouseup(松开)

焦点事件：blur(失去焦点), focus(获取焦点)

键盘事件：keydown(正按下), keypress(按下), keyup(松开)

文本事件：change(表单值变更), input(文本输入)

2. 事件绑定

DOM L0 旧写法：元素.on事件 = function(){...}

DOM L2 新写法：元素.addEventListener('事件', 函数) // addEventListener('click', function...)

备注：旧写法会覆盖原有事件。

3. 事件解绑

DOM L0 旧写法：元素.on事件 = null

DOM L2 新写法：元素.removeEventListener('事件', 函数名) // 匿名函数无法解绑

4. 事件对象与环境对象

4.1 环境对象

普通事件 this指向 window，

元素.addEventListener('事件', function() { this } ) // 这里的this返回调用元素的html

4.2 事件对象

元素.addEventListener('事件', function(e) { ...} ) // 参数e是事件对象，可获得window属性

5. 事件流

元素.addEventListener('click', function(){...}, true) // 第三个参数true是捕获，false默认冒泡可不写

5.1 捕获阶段（旧版DOM L0没有捕获阶段）

document > html > body > div ，捕获事件流，事件由上到下执行

div事件会使父级元素触发相同事件，由上到下触发。

5.2 冒泡阶段

div < body < html < document , 冒泡事件流，事件由下到上执行

div事件会使父级元素触发相同事件，由下到上触发。

5.3 阻止冒泡（也可阻止捕获）

元素.addEventListener('click', function(){ this.stopPropagation() })

5.4 阻止默认行为

元素.addEventListener('click', function(e){ e.prientDefault() })

例如：submit的超链接点击可以阻止不触发

5.5 鼠标经过

mouseover, mouseout有冒泡效果

mouseenter, mouseleave 没有冒泡效果，推荐使用

6. 事件委托

给父元素绑定事件，使子元素全可以触发

父元素.addEventListener('click', function(e){ this(父), e.target(子) })

e.target.targetName可获取子元素标签名，用来判断是否加事件。

console.dir(元素) // 可控制台打印出对象

7. 页面加载事件

7.1 JS写在HTML之前，无法获取表单元素。可指定页面加载完再执行JS

window.addEventListener('load', function()...)

7.2 其他元素的加载：如：img.addEventListener('load', fun...) // 图片加载完处理

7.3 document.addEventListener('DOMContentLoaded', fun...) // HTML加载完成处理无需等待图片样式加载

8. 滚动事件

window.addEventListener('scroll', fun...) // 页面滚动

document.documentElement.scrollTop // 页面卷去的上部，看不见部分

document.documentElement.scrollLeft // 页面卷去的左部，看不见部分

元素.addEventListener('scroll', fun...) // 有滚动条的元素滚动

元素.scrollTop // 元素卷去的上部，看不见部分

元素.scrollLeft // 元素卷去的左部，看不见部分

备注：为scrollTop，或scrollLeft 赋值，可使滚动条跳到指定位置。

9. 日期时间

获取当前时间 const date = new Date()

指定时间 const date = new Date('2021-03-24')

date.getYear, getMonth等获取年月日时分秒。