事件

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内容写在里面

自定义事件
还没搞懂