你的浏览器不支持canvas

做你害怕做的事情，然后你会发现，不过如此。

《智能社：JavaScript教程——从入门到精通》第22~23集笔记 事件高级应用

时间： 2017年12月15日 07:25:00 作者： 黄运鑫

本文章属原创文章，未经作者许可，禁止转载，复制，下载，以及用作商业用途。原作者保留所有解释权。

笔记目录

  1. 《智能社：JavaScript教程——从入门到精通》第1~5集笔记 事件
  2. 《智能社：JavaScript教程——从入门到精通》第6~10集笔记
  3. 《智能社：JavaScript教程——从入门到精通》第11~14集笔记 DOM操作和表格
  4. 《智能社：JavaScript教程——从入门到精通》第15~19集笔记 运动
  5. 《智能社：JavaScript教程——从入门到精通》第20~21集笔记 鼠标键盘事件
  6. 《智能社：JavaScript教程——从入门到精通》第22~23集笔记 事件高级应用
  7. 《智能社：JavaScript教程——从入门到精通》第24~25集笔记 Ajax
  8. 《智能社：JavaScript教程——从入门到精通》第26~29集笔记 面向对象
  9. 《智能社：JavaScript教程——从入门到精通》第30~31集笔记 坐标和cookie
  10. 《智能社：JavaScript教程——从入门到精通》第32集笔记 JS正则表达式
  • 本文为原创，转载请注明：https://blog.xinpapa.com/2017/12/15/zhinengshe22-23/

详细内容

1.事件绑定

  • IE方式
    • attachEvent(事件名称,函数)，绑定事件处理函数
      • 在同一个元素上加两个同样的事件，则事件会覆盖
      • 用attachEvent解决事件覆盖的问题，只有IE兼容
    • detachEvent(事件名称,函数)，解除绑定
  • DOM方式
    • addEventListener(事件名称,函数,捕获)
    • removeEventListener(事件名称,函数,捕获)
    • 低版本IE不兼容
  • 绑定匿名函数，会无法删除
  • 解决兼容性的代码如下： 
      <body>
      <input id="btn1" type="button" value="按钮" />
  </body>

    window.onload = function () {
  var oBtn = document.getElementById("btn1");
  myAddEvent(oBtn, "click", function () {
      alert("a");
  });
  myAddEvent(oBtn, "click", function () {
      alert("b");
  });
};
//解决绑定事件兼容性的封装方法
function myAddEvent(obj, ev, fn) {
  if (obj.attachEvent) {
      obj.attachEvent("on" + ev, fn);
  } else {
      obj.addEventListener(ev, fn, false);
  }
};

2.高级拖拽1

  • 复习拖拽的原理
    • 距离不变
    • 三个事件：down、move、up
  • 限制范围
    • 对位置进行判断
      • 不能拖出窗口的div
      • 不能拖出指定对象的div
  • 磁性吸附
  • 代码如下： 
    #div1{
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
}
#div2{
  width: 800px;
  height: 500px;
  margin: 100px auto;
  background: #CCC;
  position: relative;
}

      <body>
      <div id="div2">
          <div id="div1"></div>
      </div>
  </body>

    window.onload = function () {
  var oDiv = document.getElementById("div1");
  var oDiv2 = document.getElementById("div2");
  var disX = 0;//得到鼠标按下时鼠标到div左边的距离
  var disY = 0;//得到鼠标按下时鼠标到div上边的距离
  oDiv.onmousedown = function (ev) {
      var oEvent = ev || event;
      disX = oEvent.clientX - oDiv.offsetLeft;
      disY = oEvent.clientY - oDiv.offsetTop;
      //当鼠标按下拖拽时，用鼠标的位置移动div
      document.onmousemove = function (ev) {
          var oEvent = ev || event;
          var l = oEvent.clientX - disX;
          var t = oEvent.clientY - disY;
          if (l < 30) {//当拖拽div到左边缘则固定div的l为0
              l = 0;
          } else if (l > oDiv2.offsetWidth - oDiv.offsetWidth - 30) {
              //当拖拽div到右边缘则固定div
              l = oDiv2.offsetWidth - oDiv.offsetWidth;
          }
          if (t < 30) {//当拖拽div到上边缘则固定div
              t = 0;
          } else if (t > oDiv2.offsetHeight - oDiv.offsetHeight - 30) {
              //当拖拽div到下边缘则固定div
              t = oDiv2.offsetHeight - oDiv.offsetHeight;
          }
          oDiv.style.left = l + "px";
          oDiv.style.top = t + "px";
      };
      //鼠标抬起时，清除事件
      document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
      };
      return false;//阻止默认事件，解决火狐空div拖拽bug
  };
};

3.高级拖拽2

  • 图片拖拽
    • 阻止默认事件
  • 文字选中
    • 阻止默认事件
      • 低版本IE下拖动有问题，会选中拖动时鼠标经过的文字
      • 用setCapture事件捕获可以解决IE下拖动的问题（setCapture只有IE兼容）
  • 代码如下： 
    #div1{
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
}

      <body>
      fasdfas<br/>dfasdfsdfas<br/>dfdfasdfas
      <div id="div1">adfasdfasdfasdf</div>
      <br/>dasdfasdfasas<br/>dfdfasdfasdfs
  </body>

    window.onload = function () {
  var oDiv = document.getElementById("div1");
  var oDiv2 = document.getElementById("div2");
  var disX = 0;//得到鼠标按下时鼠标到div左边的距离
  var disY = 0;//得到鼠标按下时鼠标到div上边的距离
  oDiv.onmousedown = function (ev) {
      var oEvent = ev || event;
      disX = oEvent.clientX - oDiv.offsetLeft;
      disY = oEvent.clientY - oDiv.offsetTop;
      //判断是true则是低版本IE，用setCapture解决IE下拖拽过快时bug和拖拽选中文字的bug
      if (oDiv.setCapture) {
          //当鼠标按下拖拽时，用鼠标的位置移动div
          oDiv.onmousemove = mouseMove;
          oDiv.onmouseup = mouseUP;//鼠标抬起时，清除事件
          oDiv.setCapture();//用事件捕获解决IE中拖拽过快时的bug
      } else {//如果是false则执行其他版本浏览器的代码
          //当鼠标按下拖拽时，用鼠标的位置移动div
          document.onmousemove = mouseMove;
          document.onmouseup = mouseUP;//鼠标抬起时，清除事件
      }
      function mouseMove(ev) {//封装的重复代码
          var oEvent = ev || event;
          var l = oEvent.clientX - disX;
          var t = oEvent.clientY - disY;
          oDiv.style.left = l + "px";
          oDiv.style.top = t + "px";
      };
      function mouseUP() {//封装的重复代码
          this.onmousemove = null;
          this.onmouseup = null;
          if (oDiv.releaseCapture) {
              oDiv.releaseCapture();//删除捕获
          }
      }

      return false;//阻止默认事件，解决火狐空div拖拽bug
  };
};
  • 与DOM配合
    • 带框的拖拽
    • 保留原有位置的拖拽
  • 代码如下： 
    #div1{
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
}
.box{
  border: 1px black dashed;
  position: absolute;
}

      <body>
      <div id="div1"></div>
  </body>

    window.onload = function () {
  var oDiv = document.getElementById("div1");
  var disX = 0;//得到鼠标按下时鼠标到div左边的距离
  var disY = 0;//得到鼠标按下时鼠标到div上边的距离
  oDiv.onmousedown = function (ev) {
      var oEvent = ev || event;
      disX = oEvent.clientX - oDiv.offsetLeft;
      disY = oEvent.clientY - oDiv.offsetTop;

      //当鼠标按下时，创建一个div
      var oBox = document.createElement("div");
      oBox.className = "box";//给创建的div加class
      //给创建的div设置宽度和高度
      oBox.style.width = oDiv.offsetWidth - 2 + "px";
      oBox.style.height = oDiv.offsetHeight - 2 + "px";
      document.body.appendChild(oBox);//创建的div插入到body
      //给创建的div定位到div1
      oBox.style.left = oDiv.offsetLeft + "px";
      oBox.style.top = oDiv.offsetTop + "px";

      //当鼠标按下拖拽时，用鼠标的位置移动新建的oBox
      document.onmousemove = function (ev) {
          var oEvent = ev || event;
          var l = oEvent.clientX - disX;
          var t = oEvent.clientY - disY;
          oBox.style.left = l + "px";
          oBox.style.top = t + "px";
      };
      //鼠标抬起时，清除事件
      document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
          //鼠标抬起时，重新定位div1
          oDiv.style.left = oBox.offsetLeft + "px";
          oDiv.style.top = oBox.offsetTop + "px";
          //当鼠标抬起时，删除新建的oBox框
          document.body.removeChild(oBox);
      };
      return false;//阻止默认事件，解决火狐空div拖拽bug
  };
};

4.自定义滚动条

  • 拖拽
    • 只有横向拖拽
    • 限制范围——范围的大小
    • 计算比例——当前值/最大值
  • 控制其他对象
    • 控制物体的大小
    • 控制物体的透明度
    • 控制文字滚动
  • 代码如下： 
    #parent{
  width: 600px;
  height: 20px;
  background: #CCC;
  position: relative;
  margin: 100px auto;
}
#div1{
  width: 20px;
  height: 20px;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
}
#div2{
  width: 400px;
  height: 300px;
  border: 1px black solid;
  overflow: hidden;
  position: relative;
}
#div3{
  position: absolute;
  left: 0;
  top: 0;
}

      <body>
      <div id="parent">
          <div id="div1"></div>
      </div>
      <div id="div2">
          <div id="div3">
              1、手<br/>心<br/>捧<br/>着<br/>的<br/>
              文<br/>字<br/>，<br/>清<br/>清<br/>浅<br/>
              浅<br/>，<br/>刻<br/>着<br/>你<br/>的<br/>眉
              <br/>，<br/>你<br/>的<br/>眼<br/>，<br/>素<br/>
              笔<br/>深<br/>深<br/>，<br/>想<br/>你<br/>的<br/>
              日<br/>子<br/>，<br/>光<br/>阴<br/>开<br/>成<br/>了<br/>一
              <br/>朵<br/>思<br/>念<br/>的<br/>花<br/>，<br/>
          </div>
      </div>
  </body>

    window.onload = function () {
  var oDiv = document.getElementById("div1");
  var oDiv2 = document.getElementById("div2");
  var oDiv3 = document.getElementById("div3");
  var oParent = document.getElementById("parent");
  var disX = 0;//得到鼠标按下时得到鼠标到div左边的距离
  oDiv.onmousedown = function (ev) {
      var oEvent = ev || event;
      disX = oEvent.clientX - oDiv.offsetLeft;

      //当鼠标按下拖拽时，用鼠标的位置移动新建的oBox
      document.onmousemove = function (ev) {
          var oEvent = ev || event;
          var l = oEvent.clientX - disX;
          if (l < 0) {
              l = 0;
          } else if (l > oParent.offsetWidth - oDiv.offsetWidth) {
              l = oParent.offsetWidth - oDiv.offsetWidth;
          }
          oDiv.style.left = l + "px";

          //拖动条时得到拖动的比例
          var scale = l / (oParent.offsetWidth - oDiv.offsetWidth);

          oDiv3.style.top = -scale * (oDiv3.offsetHeight - oDiv2.offsetHeight) + "px";
      };
      //鼠标抬起时，清除事件
      document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
          //鼠标抬起时，重新定位div1
          oDiv.style.left = oBox.offsetLeft + "px";
          //当鼠标抬起时，删除新建的oBox框
          document.body.removeChild(oBox);
      };
      return false;//阻止默认事件，解决火狐空div拖拽bug
  };
};

对于本文内容有问题或建议的小伙伴，欢迎在文章底部留言交流讨论。