JavaScript 回顾(九)

123 阅读2分钟

1, 事件对象

(1)onmousemove(鼠标移动事件)

当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数。在事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标,键盘哪个按键等等

 <script>
    window.onload = function() {
        var a = document.getElementsByTagName('a')
        var b = document.getElementsByTagName('b')
        a.onmousemove = function(event) {
          /**
           * clientX 可以获取鼠标指针的水平坐标
           * clientY 可以获取鼠标指针的垂直坐标
           * 在IE8中,是将事件对象作为window对象的属性保存的
           * if(!event) {
           *    event = window.event
           *  }
          */
         event = event || window.event;
         var x = event.clientX;
         var b = event.clientY;
         showMeg.innnerHTML = x, b
        }
    }
  </script>

(2) div跟随鼠标移动

注意:clientX/clientY 用于获取鼠标在当前可见窗口的坐标

pageX/pageY可以获取鼠标相对于当前页面的坐标

 <style>
     #box {
       width:100px;
       height: 100px;
       background-color: indianred;
       /**
       * 设置偏移量,一定要开启定位
       */
       position: absolute;
     }
  </style>
  <script>
     window.onload = function () {
       var box = document.getElementById('box')
       window.onmousemove = function(event) {
         // 处理浏览器兼容性问题
         event = event || window.event
         // 获取鼠标的坐标位置, 
         // var left = event.clientX;
         // var top = event.clientY;
         var left = event.pageX;
         var top = event.pageY;
         // 设置div的偏移量
         box.style.left = left + 'px';
         box.style.top = top + 'px'
       }
     }
  </script>
</head>
<body style="height: 1500px;">
  <div id="box"></div>
</body>

2, 冒泡

所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发

注意:打开发中,大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象取消冒泡

(1) 取消冒泡

 <script>
     window.onload = function() {
        var children = document.getElementsByTagName('children')
        var father = document.getElementsByTagName('father')
        var grandfather = document.getElementsByTagName('grandfather')
        children.onclick = function(event) {
          event = event || window.event
          // 取消冒泡
          event.cancelBubble = true
          alert('children')
        }
        father.onclick = function(event) {
          event = event || window.event
          event.cancelBubble = true
          alert('father')
        }
        grandfather.onclick = function() {
          event = event || window.event
          event.cancelBubble = true
          alert('grandfather')
        }
     }
  </script>

(2) 事件委派

指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提供程序的性能

<ul>
  <li><a href="javascript:;" class="link">超链接1 </a></li>
  <li><a href="javascript:;" class="link">超链接2 </a></li>
  <li><a href="javascript:;" class="link">超链接3 </a></li>
</ul>
// 统一为ul绑定一个单击响应事件
ul.onclick = function(event) {
   event = event || window.event
   if (event.target.className = "link") {
       alert('我是ul的单击响应事件')
 }
}

注意:通过 对象.事件 = 函数 的形式绑定响应事件,它只能同时为一个元素的一个事件绑定一个响应函数,不能绑定多个,如果绑定多个,后边会覆盖掉前边的。

(3)addEventLististener

通过addEventLististener可以同时绑定多个函数,参数说明

  • 第一个参数:事件的字符串不要on
  • 第二个参数:回调函数当事件触发的时候该函数会调用
  • 第三个参数:是否在捕获阶段触发,一般都是false
​
btn.addEventListener('click', function() {
    alert(1)
}, false)
btn.addEventListener('click', function() {
    alert(2)
}, false)

(4) 事件捕获

W3C规定,将事件的传播分成三个阶段

1,捕获阶段

 -  在捕获阶段时,从最外层的祖先元素,想目标元素进行事件的捕获,但是默认此时不会触发事件

2,目标阶段

  • 事件捕获到目标元素,捕获结束,开始在目标元素上触发事件

3,冒泡阶段

  • 事件从目标元素想他的祖先元素传递,依次触发祖先元素上的事件

注意: 如果希望在捕获阶段触发事件,可以将addEventListener()的第三个参数设置为true

3, 拖拽

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拖拽</title>
  <style>
     #box {
       width:100px;
       height: 100px;
       background-color: red;
       position: absolute;
     }
  </style>
  <script>
    window.onload = function() {
      var box = document.getElementById('box')
      // 1, 当鼠标在被拖拽元素上按下时, 开始拖拽:onmousedown
      // 2, 当鼠标移动时候被拖拽元素跟随鼠标移动: onmousemove
      // 3, 当鼠标松开时被拖拽元素固定在当前位置:  onmouseup
      
      box.onmousedown = function(event) {
        // div的偏移量
        event = event || window.event;
        var ot = event.clientY - box.offsetTop;
        var ol = event.clientX - box.offsetLeft;
​
         document.onmousemove = function(event) {
            event = event || window.event
            // 获取鼠标坐标
            var left = event.clientX - ol;
            var top =  event.clientY - ot;
            // 修改box位置
            box.style.left = left + 'px';
            box.style.top = top + 'px';
         };
         document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
         };
         // 阻止浏览器提供的默认行为
         return false;
      }
    }
  </script>
</head>
<body>
  <div id="box"></div>
</body>
</html>

拖拽函数的封装 drag.js

function drag(el) {
        el.onmousedown = function(event) {
        // div的偏移量
        event = event || window.event;
        var ot = event.clientY - box.offsetTop;
        var ol = event.clientX - box.offsetLeft;
         document.onmousemove = function(event) {
            event = event || window.event
            // 获取鼠标坐标
            var left = event.clientX - ol;
            var top =  event.clientY - ot;
            // 修改box位置
            el.style.left = left + 'px';
            el.style.top = top + 'px';
         };
         document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
         };
         // 阻止浏览器提供的默认行为
         return false;
       }
      }