JavaScript 事件（1）

事件的组成

1. 事件源
2. 事件类型
3. 事件处理函数

事件的绑定方式
1、使用on绑定事件（注册事件）
当同一件事源绑定同一个事件类型的时候，那么这个事件只能触发一次（触发绑定最后的那一次）
2、监听事件
事件源.addEventListener(‘事件类型’,事件处理函数)，ie8以下版本不支持
先监听后执行（从前往后执行）
3、事件源.attchEvent（‘事件类型’,事件处理函数） ie8以下支持
先监听后执行（从后往前执行）

将兼容性判断，封装成函数

      function bindEvent(ele, type, fn) {
   
        //做兼容判断
        if ((ele, addEventListener)) {
   
          ele.addEventListener(type, function() {
   
            fn();
          });
        } else {
   
          ele.attachEvent(type, function() {
   
            fn();
          });
        }
        bindEvent(btn, "click", fun); //这里可以改变事件类型
        function fun() {
   
          console.log("鼠标点击事件");
        }
      }

鼠标相关的对象信息
1、button——记录鼠标的键
值：1（表示左键）
值：2（表示滚轮）
值：3（表示右键）
2、offsetX/offsetY——获取光标在这个元素的位置
3、clientX/clientY——获取光标 在浏览器可视窗口的位置
4、screenX/screenY——获取光标在电脑屏幕的位置
5、pageX/pageY——获取光标 在页面的位置
简单案例1：实现简单拖拽

 <style>
      * {
   
        padding: 0;
        margin: 0;
      }
      .box {
   
        width: 100px;
        height: 100px;
        background: salmon;
        position