事件
dom2是dom的升级
- 事件的传播机制：
冒泡模型：从当前点击依次向父级传递
事件捕获：从document依次向下传递
DOM事件流（标准浏览器）：从根节点向下传递，经过事件点再向父级传递 - 指定事件处理程序
把一个方法赋值给一个元素的事件处理程序属性
btn.onclick=function(){}绑定事件是同步的，点击事件是异步的 - .addEventListener('事件'，'function')
参数
①事件类型
②事件处理方法
③布尔参数，true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段处理（默认）。
不会被覆盖，可以绑定多个事件。
先执行捕获阶段，再执行冒泡阶段
btn.addEventListener('click',function(e){
console.log(this)
console.log(btn)
console.log(e.target)
//三个的结果是一样的
})
- removeEventLiistener()移除事件
移除事件不能添加匿名函数
//移除事件
var btn = document.querySelector('.btn')
var event = function (){
console.log('hh')
}
btn.addEventListener('click',event,false)
btn.removeEventListener('click',event,false)
IE兼容
attachEvent('onclick',event) 绑定事件有on，只有冒泡阶段因此没有第三个参数；this返回的是window对象，不是当前对象
事件对象
bubbles 事件是否冒泡
target 事件的目标元素
stopPropagation() 取消事件进一步捕获或冒泡
preventDefault() 取消事件默认行为
var link = document.querySelector('a')
link.onclick = function(e){
e.preventDefault()//阻止默认要打开链接的操作
console.log(this.href)//输出这个元素的href
if(/baidu.com/.test(this.href)){//如果这个链接符合www.baidu.com
location.href = this.href //把这个链接赋值给当前链接，跳转
}
}
事件代理机制
借用一个典型栗子
有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。
利用事件冒泡原理，从目标事件的节点开始，依次向上传播事件，因此给父级元素添加点击事件，父级下的子元素的点击事件都会传递到父级，就是委托父级代为执行事件，优点是不管其下有多少个子级都只操作一个父级对象，节省空间
绑定事件只能对单个元素进行绑定
HTML常用事件
click单击
dblclick双击左键
mouseover鼠标移入，鼠标每次移动到每个子级都会触发
mouseout鼠标移出
mousenter鼠标在范围内，区别是鼠标移动到子级不会再触发
mouseleave鼠标移出范围
- 表单
focus获得焦点
blur失去焦点
keyup键盘按下去松开时触发
keydown键盘按下去就触发
change输入框失去焦点后并内容有改变
submit提交表单
scroll滚动事件，会发生多次
resize窗口发生变化，会发生多次
window.onload 页面的所有资源加载完成，要所有的图片加载完成，图片的加载一般需要网络请求，比较慢，onload后获取的图片宽高样式是真实的宽高度。
DOMComtentLoaded页面渲染完成
document.addEventListener('DOMContentLoaded',function(){})一般js在head标签里引用的时候用这个，把js内容写在里面
自定义事件
还没搞懂
