事件

[qdlqf666]

事件
事件组成
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重构和回流）
当我们改变了元素的布局相关样式
（宽高、位置、元素显示消失）

[hookee]

[y_w_x_k]