JS事件

作者: 好奇的猫猫猫 | 来源:发表于2018-09-21 19:40 被阅读0次

事件对象的作用：
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（）

自定义滚动条

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>滚动条</title>
  <style>
    #wrap{
      width:300px;
      height:400px;
      border:1px solid red;
      position: relative;
      overflow: hidden;
    }
    #content{
      width:280px;
      position: absolute;
      top:0;
      
    }
    #slider{
      width:20px;
      height:100%;
      position: absolute;
      right:0;
      border-radius: 10px;
      background: gray;
    }
    #scroll{
      width:100%;
      height:50px;
      position: absolute;
      right:0;
      border-radius: 10px;
      background: green;
    }
  </style>
</head>
<body>
  <div id="wrap">
    <div id="content">夜，结束了一天的喧嚣后安静下来，伴随着远处路灯那微弱的光。风，毫无预兆地席卷整片旷野，撩动人的思绪万千。星，遥遥地挂在天空之中，闪烁着它那微微星光，不如阳光般灿烂却如花儿般如痴如醉。

        　　——题记
        
        　　欲将沉醉换悲凉，清歌莫断肠。这混乱的尘世，究竟充斥了多少绝望和悲伤。你想去做一个勇敢的男子，为爱，为信仰，轰轰烈烈的奋斗一场。你周身充斥着无人可比的灵气和光芒。你有着与伟人比肩的才气和名声，你是那样高傲孤洁的男子。你的一寸狂心未说，已经几度黄昏雨。
        
        　　曾经以为，相爱的人一定要相守，只有相守，情感才能长久。可是，此岸和彼岸只不过是空间的差距，却无法拉长心灵的距离。
        
        　　时光荏苒，岁月无声。日子不紧不慢的如涓涓溪水静静的流去，而从身边流去的只有时光，沉淀下来的是与你一路相伴的幸福和快乐，温馨和安暖。于我，在这个凋零都感受到诗意横溢的秋，只想做一件事，拈一片绯红的枫叶，轻轻地刻上我的心语。对信仰，是我今生永不改变的主题！而后，幸福的寄往有你的那个城市。从此，在我心里，于我的生命里，轻握你许的安暖，静静地在岁月的彼岸，为你守候一世永恒！</div>
    <div id="slider">
      <div id="scroll"></div>
    </div>
  </div>
</body>
<script>
  //获得标签
  var content = document.querySelector("#content");
  var slider = document.querySelector("#slider");
  var scroll = document.querySelector("#scroll");
  var wrap = document.querySelector("#wrap");
  var sliderMaxHeight = slider.offsetHeight - scroll.offsetHeight;
  var contentHeight = content.offsetHeight - wrap.offsetHeight;
  //文本移动
  function move(){
    scroll.style.top = y+"px";
    //文字滚动范围/滚动条可滚动范围*滚动条当前滚动到的位置
    var scale = contentHeight/sliderMaxHeight;
    var value = y*scale;
    content.style.top = -value + "px";
  }
  //1.点击能够拖拽滚动条
  scroll.onmousedown = function(e){
    var ev = e || window.event;
    var current_y = ev.offsetY;
    document.onmousemove = function(e){
      var ev = e || window.event;
      var offY = ev.clientY;

      y = offY - current_y;
      if(offY - current_y<=0){
        y = 0;
      }else if(offY-current_y>=sliderMaxHeight){
        y = sliderMaxHeight ;
      }
      move()
      return false;
    }
    document.onmouseup = function(){
      document.onmousemove = null;
    }
  }
  //1.按上下键进行滚动
  //2.点击滚动条跳转到某个位置
</script>
</html>

碰撞发生样式改变检测

能用css加载动画就不要js

表单事件