JS常用事件

js常用事件函数及方法

鼠标事件:

1. onclick 点击事件

	ele.onclick = function(){
		// 要执行的函数事件
		// 例如:
		console.log("点击了ele")
	}	

2. onmouseenter(鼠标移入) + onmouseleave(鼠标离开) :

	ele.onmouseeter = function(){
		console.log("鼠标移入了ele")
	}

	ele.onmouseleave = function(){
		console.log("鼠标离开了ele")
	}

3. onmouseover(鼠标移入) + onmouseout(鼠标离开):

	ele.onmouseover = function(){
		console.log("鼠标进入了ele")
	}
	ele.onmouseout = function(){
		console.log("鼠标离开了ele")
	}

onmouseenter + onmouseleave组合 和 onmouseover + onmouseout组合的区别:

1.如果是单标签的悬浮事件,这两个组合使用哪一种都可以
2.如果是嵌套的父子组合都绑定了悬浮事件,就体现了两者的差异:

onmouseenter 在进入子元素时,会先打印离开父元素,再进入子元素,最后再进入父元素,更加严谨,更加严格,而onmouseover只要在父元素内,都不算离开父元素,在进入子元素时,也不会打印离开父元素.更加包容.

键盘事件

1. onkeydown(键盘按下事件):
   
2. onkeyup(键盘松开事件):
   
3. onkeypress(键盘按压事件):
   

事件对象e

事件对象：JS中的任何一个事件，JS都会提供一个内置的event事件对象。我们可以通过这个对象，获取当前事件的有用信息。
事件对象的重要属性:
通用属性：target, currentTarget, relatedTarget, srcElement
键盘事件：key, keyCode

1. target / srcElement属性:

它用来获取触发当前事件的元素是哪一个。并不看中事件的绑定元素是谁。

2. currentTarget属性：

它用来获取当前事件的绑定元素，跟点击的元素没有关系。

3. relatedTarget属性:

应用于悬浮事件，它是用来获取某个元素相关联的元素。

对于进入事件而言，e.relatedTarget获取的是来源DOM，从哪进入到当前元素
对于离开事件而言，e.relatedTarget获取的是目的地DOM，离开之后去往哪个DOM。

onload事件:

该事件会等到页面资源，比如标签、图片、音频等内容加载完成之后，才会执行该事件。通常在head标签中写JS的时候，会使用此事件。



总结:

1. onload事件，是在某些资源加载完毕时调用；
2. onload事件，可以全局绑定到window上；也可以单独绑定到某一个标签元素

滚动事件:

滚动事件：
1.监听body的滚动；比如：上拉加载新数据。
2.监听普通标签的滚动；
// 总之：一个标签只要可以滚动，就能够添加滚动事件。

1. scrollTop属性 : 内容超出容器顶部的高度，也就是内容的已滚动高度。

当html中有 <! DOCTYPE html> 声明的时候，document.body.scrollTop是无法获取内容的滚动高度。此时可以通过 document.documentElement.scrollTop 获取。

	var scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop;

2. scrollHeight属性：获取元素的总高度。

	var scrollHeight = document.body.scrollHeight;

3. 监听body的触底操作：判断内容是否滚动到了底部。当内容滚动到底部的时候，就可以加载新数据了。
   

拖拽事件:

通过draggable这个布尔属性true/false控制标签是否可以拖拽

<div class="box" draggable="true">我是div</div>
    <a href="#" draggable="true">百度一下</a>
    <img draggable="true" src="./p3.jpg" alt="" />
    <div class="container"></div>
    <script>
      var box = document.querySelector(".box");
      var a = document.querySelector("a");
      var img = document.querySelector("img");
      var currentELement = null;
      // 1. 被拖拽元素的事件
      box.ondragstart = function (e) {
        // currentELement = e.target;
        e.dataTransfer.setData("name", "div");
      };
      a.ondragstart = function (e) {
        // currentELement = e.target;
        e.dataTransfer.setData("name", "a");
      };
      img.ondragstart = function (e) {
        // currentELement = e.target;
        e.dataTransfer.setData("name", "img");
      };
      box.ondragend = function (e) {
        console.log("拖拽结束");
      };

2. 目标元素的事件(拖拽的元素被释放时的目标元素)

 var targetContainer = document.querySelector(".container");
      targetContainer.ondragenter = function (e) {
        console.log("有拖拽元素进入容器");
      };
      targetContainer.ondragleave = function (e) {
        console.log("有拖拽元素离开容器");
      };
      targetContainer.ondragover = function (e) {
        console.log("有拖拽元素正在当前容器拖拽");
        // 对于拖拽事件，也是存在默认行为的，比如：拖拽图片浏览器全局打开。对于ondrop而言，需要在dragover中，阻止浏览器的默认行为，否则无法进入drop事件。
        e.preventDefault();
      };
      targetContainer.ondrop = function (e) {
        // 阻止浏览器打开文件。
        e.preventDefault();

        console.log("有拖拽元素在容器中释放了");
        // 一般，拖拽松手时，需要处理的逻辑，都会放在ondrop事件中。
        // e.target.append(box);

        // 需求：判断当前拖拽的内容是文件还是标签，如果是标签，直接将标签append进来；如果是文件，展示文件的基本信息。
        var files = e.dataTransfer.files;
        if (!files.length) {
          // 此时拖拽的是标签
          // e.target.append(currentELement);
          var tagName = e.dataTransfer.getData("name");
          e.target.append(document.querySelector(tagName));
        } else {
          // 此时拖拽的是文件
          var file = files[0];
          var span = document.createElement("span");
          span.innerText = `文件类型：${file.type}，文件大小：${file.size}，文件名称：${file.name}`;
          e.target.append(span);
        }
      };

鼠标移动事件:

onmousemove:

鼠标移动事件：一般需要获取鼠标的实时坐标点位置时，会用到这个事件。场景：鼠标去哪，元素就去哪，元素的位置会受到鼠标位置的影响。

1. clientX和clientY属性：该属性是获取鼠标在可视化窗口中的位置，不考虑内容的滚动因素，只考虑看的见的部分(可视化窗口)有多大。
2. offsetX和offsetY属性：该属性是获取鼠标相对于 事件源对象 的坐标位置，需要考虑滚动因素。
3. pageX和pageY属性：该属性是获取相对于body的坐标位置，跟mousemove事件绑定在哪个元素上没有关系，需要考虑滚动因素。
4. x和y属性：和pageX、pageY一样，获取相对于body的坐标位置。