JS事件

事件对象的作用：
1.可以获得和哪个按键结合
2.获得点击所在的位置
3.获得点击所对应的标签

var wrap = document.querySelector("#wrap");
wrap.onclick = function(e){
//console.log(e);
//1.浏览器兼容
//形参对象是针对于现代浏览器
//IE不能通过形参来获得事件对象，window.event
//console.log(window.event)
var ev = e || window.event;
//2.事件对象点击所在的位置
//clientX和clientY，针对于浏览器视窗而言
console.log("clientX:"+ev.clientX+" clientY:"+ev.clientY)
//3.offsetX和offsetY相对于自身而言
console.log("offsetX:"+ev.offsetX+" offsetY:"+ev.offsetY)
//4.screenX和screenY相对于显示屏
console.log("screenX:"+ev.screenX+" screenY:"+ev.screenY)
//5.点击所对应的标签
console.log(ev.target);
}

事件对象练习：
div的中心位置跟随鼠标点击后的位置

鼠标事件：
事件分为：鼠标事件和键盘事件
鼠标事件：1.点击，onclick
2.滚轮，onmousewheel
3.右键，oncontextmenu
4.鼠标左键按下，onmousedown
5.鼠标左键按起，onmouseup
6.鼠标移动，onmousemove

鼠标事件：
1.onmouseover
2.onmouseout
3.onmouseenter
4.onmouseleave

1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有）
2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有）
这四个事件两两配对使用，onmouseover、onmouseout一对，onmouseenter、onmouseleave一对，不能混合使用。
按住->移动
事件响应

var div = document.querySeletor("#wrap");
//事件响应必须在标签的范围内才能响应
div.onmousedown = function(e){
      var myEv = e || window.event;
      var currentX = myEv.offsetX;
      var currentY = myEv.offsetY;
    window.onmousemove = function(e){
  //需要获得鼠标移动的位置
    var ev = e || window.event;
    var x = ev.clientX;
    var y = ev.clientY;
    div.style.left = x - currentX + "px";
    div.style.top = y  - currentY+ "px";
    }
window.onmouseup = function(){
    //将移动事件取消
  window.onmousemove = null;
}
}

事件冒泡
如果两个或者多个标签叠在一起，一旦这几个标签都有事件触发，那么在点击的时候会同时触发这些事件，称之为事件冒泡

即事件通过层级关系进行传递的过程

阻止事件冒泡的方式：
//IE：cancelBubble
//现在浏览器：stopPropagation,google,火狐

移入移出效果，mouseover，mouseout记得阻止冒泡

阻止默认事件

onkeydown和onkeypress的区别

//标记当前是向上滚动还是向下
var down = false;//false:向上，true:向下
//判断当前浏览器是不是火狐
var str = window.navigator.userAgent;
//值不为-1的时候，证明是火狐浏览器
if(str.indexOf("Firefox") != -1){
      window.addEventListener("DOMMouseScroll",function(e){
        var ev = e || window.event;
        if(ev.detail<0){
          down =true;}
        else{
          down = false;}
          console.log(ev);
        },false);
      }else{
      window.onmousewheel = function(e){
            var ev = e || window.event;
            if(ev.wheelDelta<0){
               down = false;
            }
            else{
              down = true;
            }
          }

函数回调callback（）

自定义滚动条

  
  
  
  
  


  

    
夜，结束了一天的喧嚣后安静下来，伴随着远处路灯那微弱的光。风，毫无预兆地席卷整片旷野，撩动人的思绪万千。星，遥遥地挂在天空之中，闪烁着它那微微星光，不如阳光般灿烂却如花儿般如痴如醉。

        　　——题记
        
        　　欲将沉醉换悲凉，清歌莫断肠。这混乱的尘世，究竟充斥了多少绝望和悲伤。你想去做一个勇敢的男子，为爱，为信仰，轰轰烈烈的奋斗一场。你周身充斥着无人可比的灵气和光芒。你有着与伟人比肩的才气和名声，你是那样高傲孤洁的男子。你的一寸狂心未说，已经几度黄昏雨。
        
        　　曾经以为，相爱的人一定要相守，只有相守，情感才能长久。可是，此岸和彼岸只不过是空间的差距，却无法拉长心灵的距离。
        
        　　时光荏苒，岁月无声。日子不紧不慢的如涓涓溪水静静的流去，而从身边流去的只有时光，沉淀下来的是与你一路相伴的幸福和快乐，温馨和安暖。于我，在这个凋零都感受到诗意横溢的秋，只想做一件事，拈一片绯红的枫叶，轻轻地刻上我的心语。对信仰，是我今生永不改变的主题！而后，幸福的寄往有你的那个城市。从此，在我心里，于我的生命里，轻握你许的安暖，静静地在岁月的彼岸，为你守候一世永恒！
    

      

    
  

碰撞发生样式改变检测

能用css加载动画就不要js

表单事件

移动端事件

面向对象