DOM第二天

DOM第二天

一、事件对象

概述:任意节点树上的节点（标签），都可以绑定一个或者多个事件。当用户触发事件的时候，系统会自动给事件处理函数传递实参，而这个参数即为事件对象（事件对象给我们传递很多信息）。

<script type="text/javascript">
 //获取节点
 var div = document.querySelector("div");
 div.onclick = function(event){
   //对于高级浏览器：谷歌、IE8以上的浏览器---->event
   //对于低级浏览器：IE8以下的，事件对象作为BOM对象属性
   var e = event||window.event;
   console.log(e);
 }
</script>

• 当事件处理函数执行的时候，系统会自动注入实参，我们用形参接受【事件对象】

• 在不同浏览器中事件对象是有兼容问题。使用短路语句进行兼容。

1.1获取鼠标位置

概述：当用户触发事件的时候，系统会自动给事件处理函数注入实参【事件处理函数】，

它给我们提供很多信息，可以获取鼠标位置。

1.1.1screenX||screenY

概述：他们两者是事件对象属性，主要可以获取鼠标位置。获取鼠标位置零零点在电脑屏幕左上角。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UAPpf8oM-1658047043000)(file:///C:/Users/romantic/AppData/Local/Packages/oice_16_974fa576_32c1d314_33a5/AC/Temp/msohtmlclip1/01/clip_image004.jpg)]

<script type="text/javascript">
  //获取节点
var inn = document.querySelector('.inner');
//鼠标在整个网页当中移动
document.onmousemove = function(event){
​     //短路语法进行兼容
​     var e = event||window.event;
​     inn.innerHTML = "screenX:"+ e.screenX + "screenY"+e.screenY;
}
</script>

1.1.2pageX||pageY

概述：他们两者也是事件对象属性，主要作用也是获取鼠标位置。是网页主题部分左上角为零零点。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qSFpQNvM-1658047043001)(file:///C:/Users/romantic/AppData/Local/Packages/oice_16_974fa576_32c1d314_33a5/AC/Temp/msohtmlclip1/01/clip_image006.jpg)]

<script type="text/javascript">
      //获取节点
  var inn = document.querySelector('.inner');
  //鼠标在整个网页当中移动
  document.onmousemove = function(event){
​     //短路语法进行兼容
​     var e = event||window.event;
​     inn.innerHTML = "screenX:"+ e.screenX + "screenY"+e.screenY+"<br/>";
​     inn.innerHTML += "pageX:"+e.pageX +"pageY:"+e.pageY;
  }
</script>

1.1.3clientX||clinetY

概述:他们两者也是事件对象属性，主要作用是获取鼠标位置。但是他的零零点是按照可视区域左上角为零零点。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yd2P7W8x-1658047043002)(file:///C:/Users/romantic/AppData/Local/Packages/oice_16_974fa576_32c1d314_33a5/AC/Temp/msohtmlclip1/01/clip_image008.jpg)]

1.1.4offsetX||offsetY

概述：他们两者也是事件对象属性，他们两者主要的作用也是获取鼠标位置。

获取数据类似pageX||pageY。但是这个获取数据零零点，会收到子元素坐标体系影响。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YKtWoFtk-1658047043004)(file:///C:/Users/romantic/AppData/Local/Packages/oice_16_974fa576_32c1d314_33a5/AC/Temp/msohtmlclip1/01/clip_image010.jpg)]

<script type="text/javascript">
//获取节点
var inn = document.querySelector('.inner');
//鼠标在整个网页当中移动
document.onmousemove = function(event){
​     //短路语法进行兼容
​     var e = event||window.event;
​     inn.innerHTML = "screenX:"+ e.screenX + "screenY"+e.screenY+"<br/>";
​     inn.innerHTML += "pageX:"+e.pageX +"pageY:"+e.pageY+"<br/>";
​     inn.innerHTML +="clientX"+e.clientX +"clinetY"+e.clientY+"<br/ >";
​     inn.innerHTML +="offsetX"+e.offsetX +"offsetY"+e.offsetY;
}
</script>

1.2原生JS实现拖拽效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1SzKhCnZ-1658047043006)(file:///C:/Users/romantic/AppData/Local/Packages/oice_16_974fa576_32c1d314_33a5/AC/Temp/msohtmlclip1/01/clip_image012.jpg)]

概述:在前端领域当中拖拽是一个非常常见效果。拖拽三板斧鼠标按下=>鼠标移动=>鼠标抬起。

<script type="text/javascript">
    //移除事情
 var div = document.querySelector('.cur');
 //鼠标按下
 div.onmousedown = function(event){
   //短路语法兼容事件对象
   var e = event||window.event;
   //获取鼠标距离元素左侧顶部数据
   var startX = e.offsetX;
   var startY = e.offsetY;
   //鼠标在整个网页中移动
   document.onmousemove = function(event1){
​     //短路语法兼容事件对象
​     var e1 = event1||window.event;
​     //元素进行拖拽
​     div.style.left = e1.clientX - startX +"px";
​     div.style.top = e1.clientY - startY +"px";
   }
 }
 //鼠标抬起事情----将鼠标移动事件移除
 document.onmouseup =function(){
​    document.onmousemove = null;
 }
</script>

• 可以将元素事件移除：就是给这个元素绑定多次事件。让后者覆盖前者。

1.3淘宝放大镜

<script type="text/javascript">
    //获取节点
  var slider = document.querySelector('.slider');
  var small = document.querySelector('.small');
  //鼠标按下
  slider.onmousedown = function(event){
​    //短路语法进行兼容
​    var e = event||window.event;
​    var startX = e.offsetX;
​    var startY = e.offsetY;
​    //鼠标移动
​    document.onmousemove = function(event){
​      var e1 = event||window.event;
​      //计算出元素left数值
​      var l = e1.clientX - startX ;
​      var t = e1.clientY - startY;
​      //因为滑块只能在父盒子中进行移动----进行条件约束
​      if(l <= 0) l = 0;
​      if(l >=300) l = 300;
​      if(t <=0) t = 0;
​      if(t >=200) t = 200;
​      slider.style.left = l +"px";
​      slider.style.top = t +'px';
​      //修改小图背景图定位
​      small.style.backgroundPosition="-" + l +"px -" + t +"px";
​    }
  }
  //鼠标抬起
  document.onmouseup = function(){
​      //将鼠标移动的事件移除
​      document.onmousemove = null;
  }
</script>