2018-10-19

1.事件：

click
dbclick
mouseover
mouseout
mouseenter
mouseleave
onload
change
blur
input
submit
focus
scroll
resize

2. 鼠标的点击位置？

键盘按键?

如果对一个标签设置了点击事件之后，没有效果？
1.有没有报错。
2.事件有没有写错
3.元素有没有获取到

document是整个文档的父级。
event对象是事件发生的时候产生的一个对象。但是FF不支持。

3. 获取一个兼容的event对象。

  var ev =  ev || event ;

event.clientX:相对于窗口可视区域的X坐标
event.clientY:相对于窗口可视区域的Y坐标

封装的鼠标点击位置的坐标获取方法。

    function getPos(ev){
       var scrollLeft = window.pageXOffset ||     
    document.documentElement.scrollLeft ||   document.body.scrollLeft;
      var scrollTop = window.pageYOffset || 
    document.documentElement.scrollTop ||     document.body.scrollTop;
    return {
         left:scrollLeft+ev.clientX,
         top:scrollTop + ev.clientY
    };
}

4.事件流

事件冒泡：事件冒泡就是内层元素的事件会随着文档流向上冒泡，
如果上层具有相同的事件，那么这个事件也会响应。直到冒泡到顶层对象document。

  event.cancelBubble = true; //停止冒泡

5. 键盘事件

keydown
keypress
keyup
按键的编码 。 ev.keyCode
按键编码是连续的。0-9，a-z

ctrlKey、shiftKey、altKey 这个是键盘事件的功能键，如果这些键按下的话，对应的key值是true。这样可以实现多按键操作。
Ctrl+enter
ctrl+c
ctrl+v

6.鼠标右键的菜单事件 on contextmenu

return false ; 能够阻止事件的默认行为。

7.拖拽事件

复合事件
首先是鼠标按下，然后是鼠标移动。然后是鼠标放开。自己理解。

var  d = document.querySelector('div');
d.onmousedown = function(ev){
    var ev = ev || event;
    var x = ev.clientX - d.offsetLeft;
    var y = ev.clientY-d.offsetTop;
    d.onmousemove = function(ev){
        var ev = ev || event;
        d.style.left = ev.clientX - x + 'px';
        d.style.top = ev.clientY - y + 'px';
    };
    d.onmouseup = function(){
        d.onmousemove = function(){};
    };
};