事件QAQ（笔记）
currentTarget 事件源 当前事件源
preventDefault（） 不要执行与事件关联的默认操作
与事件关联的默认动作：
点击超链接跳转页面，表单中点击提交按钮提交表单，浏览器页面中点击右键弹出右键菜单
自定义右键菜单
ul#contentmenu > li*3
#contentmenu {
dispaly:none;
position:absolute;
top:0px;
left:0px;
}
右键事件：
document.oncontentmenu = function(e){
//TODO...
e = e || event;//event = event || window.event;
e.preventDefault()；//除去默认菜单
$("#contentmenu").style.display = "block";//让自定义菜单显示
//设置出现的坐标
$("#contentmenu").style.left = event.clientX + "px";
$("#contentmenu").style.top = event.clientY + "px";
}
document.onclick = function(){
//todo
$("#contentmenu").style.display = "none";
}
阻止与事件关联的默认动作：
标准：event.preventDefault（）；
非标准：event.returnValues == false；
兼容：event.preventDefault？event.preventDefault（）：event.returnValues == false；
超级链接消除默认动作
<a href = "javascript:void(0)">del</a>
document.getElementsByTagName("a")[0].onclick = function(event){
event.preventDefault();
}
document.getElementsByTagName("a")[0].onclick = function(event){
return false;
}
表单提交事件
form action=“”
input text #username
input password#password
input submit
//submit//表单提交会触发，onsubmit事件的执行；
$("from")[0].onsubmit = function(event){
if($("username").value.trim().length === 0 && $("password").value.length === 0){
event.preventDefault（）；
}
}
拖拽效果：
按下鼠标左键：onmousedown
事件源：待拖拽的元素
事件处理程序：获取鼠标按下时光标在事件源元素坐标系中的坐标，绑定鼠标移动事件
移动鼠标：mousemove
事件源：document
事件处理程序：计算拖拽的元素定位（用光标在窗口中的坐标-光标早拖拽元素中的坐标），设置css
松开鼠标：mouseup
事件源：document
事件处理程序:取消鼠标移动事件；
简单拖拽：
img #img
img{
position：absolute；
top：0px;
left:0px;
}
var img = $("img")[0];
img.onmousedown = function(event){
event = event || windows.event;
var _offsetX = event.offsetX;
var _offsetY = event.offsetY;
//绑定鼠标移动事件
document.onmousemove = function(event){
event = event || windows.event;
img.style.top = event.clientY - _offsety + "px";
img.style.left = event.clientX - _offsetx + "px";
if(event.clientY - _offsety <= 0){ img.style.top = 0 + "px"; }
if(event.clientX - _offsetx <= 0){ img.style.left = 0 + "px"; }}
}
document.onmouseup = function(){
document.onmousemove = null ;
}未完成
滚动距离：
document.documentElement.scrollTop||document.body.srollTop;--距离顶部滚动了多远
document.documentElement.scrollLeft||document.body.srollLeft;--距离左侧；
window.onscroll = function(){}//页面滚动，触发该事件；
document.documentElement.scrollTop = 0 //使用赋值操作回到顶部，会触发onscroll事件
计算宽高：
element.clientWidth
element.clientHeight
----边框以内的宽高（内容宽高+padding宽高-滚动条）
element.offsetWidth
element.offsetHeight
---边框以及边框以内所有内容的宽高
如果元素display：none，宽高皆为0；
浏览器视口宽高
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth；
window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight；
let是块，var变量提升；
计算定位：
element.offsetTop // 距离最近的有定位的祖先元素的顶部距离
element.offsetLeft// 距离最近的有定位的祖先元素左部距离
element.offsetParent// 最近的有定位的祖先元素
event.pageX 如果不支持使用这个属性，怎么获取？
event.clientX + document.documentElement.scrollLeft || document.body.scrollLeft ；
mouseenter（mouseleave）和mouseover（mouseout）
mouseover //重复触发
mouseenter//没有事件冒泡
