JavaScript 事件监听

  <!-- onload可以写在body中，也可以在js脚本中写成window.onload事件监听 -->
  <body onload="alert('onload');">

    <!-- js不区分单引、双引，字符串用单引、双引均可 -->
    <button id="btn" onclick="alert('click');">click me</button>

    <script>
      // window.οnlοad=function(){
      //   alert("onload");
      // }

      var ele=document.getElementById("btn");
      
      // 以属性的形式设置事件监听。可以写匿名函数
      ele.onmouseover=function(){
        console.log("mouseover");
      }

      function out(){
        console.log("mouseout");
      }

      // 也可以调用，注意只写函数名，函数名后面不加()
      // 加()表示调用，只在加载页面时执行1次，起不到事件监听的作用
      ele.onmouseout=out;

    </script>

  </body>

事件监听可以以属性的形式写在html标签中，但不推荐这样做，因为和html页面内容杂糅在一起，东一处西一处，不好维护。

html只写页面结构、内容，css写页面样式，js完成交互（事件监听）。

样式尽量写在.css文件、style标签中，js代码尽量写在.js文件、script标签中，好维护一些，不要与html页面内容杂糅在一起。

常见的事件监听

#键盘按键，不包括鼠标按键
onkeydown  #按键按下
onkeypress  #按键按住
onkeyup  #释放按键
#这3个事件组成一个onclick事件，onclick事件在onkeyup之后触发


#鼠标按键
onmousedown
onmouseup


onclick  #单击
ondblclick  #双击
#键盘按键、鼠标按键的单双击都算


onmousedown  #鼠标移入的一刹那
onmousemove  #鼠标在该元素上移动
onmouseout  #⿏标移出


#表单元素
onchange  #元素值（value）改变
onfocus  #聚焦
onblur  #失焦
onsubmit  #提交


#页面加载完成
onload  #常用于body元素
window.onload  #在js脚本中可用onload还要先getElement获取元素，可以直接用这个，更简单

此外还有媒体播放onplay、拖放ondrag等。

事件监听是全小写

事件的绑定、解绑

  var app=document.getElementById("app");

  function out(){
    console.log("mouseover");
  }

  // 绑定事件监听。参数：事件、处理事件的函数，函数可以使用匿名函数，但使用匿名函数解绑不了
  app.addEventListener("mouseover",out);

  // 解除事件监听
  app.removeEventListener("mouseover",out);

onmouseover这些带on的事件监听，其实都是对addEventListener()的封装，已经设置好了事件

事件冒泡

  <div id="father">
      <div id="son"></div>
  </div>

事件默认会逐级冒泡，会被所有设置了该事件监听的祖先元素处理。

eg. 父元素、子元素都监听了鼠标移入事件，如果子元素发生鼠标移入事件，事件先被子元素处理，再冒泡到父元素，被父元素处理，因为子元素也是父元素的一部分，也算父元素发生了该事件。

可以在某一级取消事件冒泡，取消之后该事件不再往上一级冒泡

  var son=document.getElementById("son");

  son.onmouseover=function(){
    //....   // 处理事件
    event.cancelBubble=true;  //取消事件冒泡。Bubble 冒泡
  }

event是js预定义的事件对象名，表示一个事件对象。

如果不想使用这个名称，可以在参数表末尾写一个形参表示事件对象。

事件会自动传入。

键盘事件、键码

有时候需要监听指定的按键，比如按Enter发送消息，那就需要判断按下的键是不是Enter。

键盘上的每个按键都对应一个键码，键码是一个数字，根据键码来判断按下的是哪个键。

  <input type="text" id="input" />

  <script>
    var input=document.getElementById("input");

    input.onkeydown=function(){
      if(event.keyCode==13)
        console.log("你按了Enter");
       
      // 监听组合键
      if(event.ctrlKey && event.keyCode==67)
        console.log("你按了Ctrl+C");
    }
  </script>

键码表参考：
https://www.bejson.com/othertools/keycodes/

组合键：ctrlKey、shiftKey、altKey
均为布尔值，如果按住了ctrl，那ctrlKey的值就是true，以此类推。

鼠标事件

有时候需要监听鼠标事件，比如左键按下、获取单击位置的坐标

 var app=document.getElementById("app");


  // 按下鼠标按键时
  app.onmousedown=function(){
    // 键盘是keyCode，鼠标是button。鼠标左键是0，中键（滚轮）是1，右键是2
    if(event.button==0){  
      // 在浏览器中的横纵坐标，以浏览器左上角书签栏下面的地方为原点
      console.log(event.clientX);
      console.log(event.clientY);

      // 在屏幕上的横纵坐标，以屏幕左上角为原点
      console.log(event.screenX);
      console.log(event.screenY);
    }
  }


  // 释放鼠标按键时
  app.onmouseup=function(){
    if(event.button==0){
      // 点击点的横纵坐标
      console.log(event.clientX);
      console.log(event.clientY);

      console.log(event.screenX);
      console.log(event.screenY);
    }
  }

如果要获取鼠标拖放的起止位置，监听mousedown获取开始位置坐标，监听mouseup获取结束位置坐标