标签：block ++ 兼容性 menu set list OLE 相同 菜单
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
var box = document.getElementById("box");
box.onclick = function(ev){
var e = ev||event;
console.log(e.button);
}
box.oncontextmenu = function(ev){
var e = ev||event;
console.log(e.button);
return false;
}
load ： 页面全部资源加载完毕
scroll ： 浏览器滚动的时候触发
...
click ：点击事件
dblclick ：双击事件
contextmenu ： 右键单击事件 内容菜单事件
mousedown ：鼠标左键按下事件
mouseup ：鼠标左键抬起事件
mousemove ：鼠标移动
mouseover ：鼠标移入事件
mouseout ：鼠标移出事件
mouseenter ：鼠标移入事件
mouseleave ：鼠标移出事件
...
keyup ： 键盘抬起事件
keydown ： 键盘按下事件
keypress ： 键盘按下再抬起事件（时间稍长）
...
change : 表单内容改变事件
input : 表单内容输入事件
submit : 表单提交事件
...
touchstart ： 触摸开始事件
touchend ： 触摸结束事件
touchmove ： 触摸移动事件
...
回车 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对象
document.createElement("标签名");
插入：
内部
父元素.appendChild(插入的元素)
作为父元素的最后一个子元素插入的
外部
父元素.insertBefore(新的元素,在谁之前);
删除
父元素.removeChild(删除的元素)
替换一个元素
父元素.replaceChild(新的元素,被替换的元素);
文档碎片：
var arr= [1,2,3,4,5,56];
var list = document.getElementById("list");
var container = document.createDocumentFragment();
for(var i=0;i<arr.length;i++){
var oli = document.createElement(‘li‘);
oli.innerHTML = arr[i];
container.appendChild(oli);
}
list.appendChild(container)
作用：提高代码运行效率，减少页面的重新渲染
页面什么时候回重新渲染： 扩展（高工资 dom重构和回流）
当我们改变了元素的布局相关样式
（宽高、位置、元素显示消失）
标签：block ++ 兼容性 menu set list OLE 相同 菜单
原文地址：https://www.cnblogs.com/cxf1214/p/11421133.html
