事件

事件
事件组成
1，触发谁的事件
事件源
2，触发是什么事件
click mouseover mouseout
3,事件触发之后，干什么
事件函数 （干什么写在事件函数中）
事件对象
类似于飞机的“黑匣子” 用于保存 一个事件发生的时候，所有的信息
比如：事件发生时鼠标的坐标
如何获取事件对象：
兼容性问题：在不同浏览器上 获取方法不一样
在IE 以及DOM标准：全局的对象（window下） 名字event
在高版本IE 以及 chrome 不支持event来获取事件对象的，另外一种方式
自动变成事件函数的第一个参数（这个参数就是事件对象）
兼容性写法：

btn.onclick=function(ev){
	var e = ev || event;
}
	注意：
只有事件发生的时候，写在事件函数中，event保存的就是当前事件的所有的信息

事件对象上有用的信息
	坐标相关
		clientX clientY  事件发生时，光标 距离可视区的坐标

offsetX offsetY 事件发生时 ，光标 距离元素的坐标
pageX pageY 事件发生时，光标距离 页面的距离（和滚动条无关）
判断鼠标按键（左键、右键） 了解
button
判断 点击的 鼠标（左键、右键）
左键：0 右键：2
阻止默认事件：在事件函数中 return false
浏览器事件
- load` ： 页面全部资源加载完毕

• scroll ： 浏览器滚动的时候触发
  鼠标事件
  - click` ：点击事件
• dblclick ：双击事件
• contextmenu ： 右键单击事件 内容菜单事件
• mousedown ：鼠标左键按下事件
• mouseup ：鼠标左键抬起事件
• mousemove ：鼠标移动
• mouseover ：鼠标移入事件
• mouseout ：鼠标移出事件
• mouseenter ：鼠标移入事件
• mouseleave ：鼠标移出事件
  键盘事件
  - keyup： 键盘抬起事件
• keydown： 键盘按下事件
• keypress ： 键盘按下再抬起事件（时间稍长）
  表单事件
  - change` : 表单内容改变事件
• input : 表单内容输入事件
• submit : 表单提交事件
  触摸事件 不要记（）
  - touchstart` ： 触摸开始事件
• touchend ： 触摸结束事件
• touchmove ： 触摸移动事件
  keyCode返回的是当前按键的unidecode编码
  回车 13
  左 37
  上 38
  右 39
  下 40

  组合按键 了解

如果一段代码块需要按下多个按钮触发
事件对象 提供了三个属性
altKey
ctrlKey
shiftKey
当我们按下了alt键 altKey的值 是true否则是false
另外一种绑定事件的方式
dom0标准
js中：
元素.on事件名 = 函数

元素.onclick = function(){//code}

function fn(){//code}
元素.onclick = fn;

缺点：
1，一个元素，相同的事件只能绑定一个事件函数
2，顺序无法改变 永远是从内向外触发
dom2标准
事件监听
dom标准：

​ 元素.addEventListener(“事件名”,fn[,true/fase]);
优点：
​ 可以绑定多个事件

​ 可以改变事件触发顺序
兼容性：
IE下事件监听
语法：
​ 元素.attachEvent(“on事件名”,fn);
注意：不能改变顺序
DOM操作
创建一个dom对象
document.createElement(“标签名”);
插入：
内部
父元素.appendChild(插入的元素)
作为父元素的最后一个子元素插入的
外部
父元素.insertBefore(新的元素,在谁之前);
删除
父元素.removeChild(删除的元素)
替换一个元素
父元素.replaceChild(新的元素,被替换的元素);
文档碎片：
作用：提高代码运行效率，减少页面的重新渲染
页面什么时候回重新渲染： 扩展（高工资 dom重构和回流）
当我们改变了元素的布局相关样式
（宽高、位置、元素显示消失）