事件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//没有事件冒泡