js事件

Doing
206 阅读7分钟

事件（Event）

事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动。我们可以为事件来绑定回调函数来响应事件。

事件句柄

image.png

事件对象

  • 当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，

    这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。。

    image.png

  • 可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存

    • 例子：
元素.事件 = function(event){

  event = event || window.event;

};
//or

元素.事件 = function(e){

  e = e || event;

};

image.png

image.png

  • 获取鼠标坐标例子

image.png

- 解决不兼容问题：添加

    元素.事件 = function(event){

      event = event || window.event;

    };
  • div跟随鼠标移动 例子
    • 鼠标离开div问题
      • clientX和clientY用于获取鼠标在当前的可见窗口的坐标
      • 但是div的偏移量，是相对于整个页面的
      • 方法一：
        • pageX和pageY可以获取鼠标相对于当前页面的坐标
          • 但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
      • 方法二：
document.onmousemove = function(event) {
  //解决兼容问题
  event = event || window.event;
  //获取滚动条滚动的距离
  /*
   * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
   * 火狐等浏览器认为浏览器的滚动条是html的，
   */
  var st = document.body.scrollTop || document.documentElement.scrollTop;
  var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
  //var st = document.documentElement.scrollTop;

  //获取到鼠标的坐标
  /*
   * clientX和clientY
   *   用于获取鼠标在当前的可见窗口的坐标
   * div的偏移量，是相对于整个页面的
   * 
   * pageX和pageY可以获取鼠标相对于当前页面的坐标
   *   但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
   */
  var left = event.clientX;
  var top = event.clientY;
  //设置div的偏移量
  box1.style.left = left + sl + "px";
  box1.style.top = top + st + "px";
};

事件的冒泡

  • 事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。
  • 事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消
  • 可以将事件对象的cancelBubble设置为true，即可取消冒泡

    • 例子：

      元素.事件 = function(event){

      event = event || window.event;

event.cancelBubble = true;

      };

    image.png
  • div跟随鼠标移动 例子修改
    • 增加一个div 设置其取消冒泡 导致原本div无法跟随鼠标进入新增div区域
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      #box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute; /* 开启box1的绝对定位 */
      }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        /*
         * 使div可以跟随鼠标移动
         */
        //获取box1
        var box1 = document.getElementById("box1");
        //绑定鼠标移动事件
        document.onmousemove = function(event) {
          //解决兼容问题
          event = event || window.event;
          //获取滚动条滚动的距离
          /*
           * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
           * 火狐等浏览器认为浏览器的滚动条是html的，
           */
          var st = document.body.scrollTop || document.documentElement.scrollTop;
          var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
          //var st = document.documentElement.scrollTop;
 
          //获取到鼠标的坐标
          /*
           * clientX和clientY
           *   用于获取鼠标在当前的可见窗口的坐标
           * div的偏移量，是相对于整个页面的
           * 
           * pageX和pageY可以获取鼠标相对于当前页面的坐标
           *   但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
           */
          var left = event.clientX;
          var top = event.clientY;
          //设置div的偏移量
          box1.style.left = left + sl + "px";
          box1.style.top = top + st + "px";
        };
 
         //取消box2 onmousemove事件的冒泡
        var box2 = document.getElementById("box2");
        box2.onmousemove = function(event) {
          event = event || window.event;
          event.cancelBubble = true;
        };
      };
    </script>
  </head>
  <body style="height: 1000px;width: 2000px;">
  //新增box2 并令其取消冒泡
    <div id="box2" style="width: 500px; height: 500px; background-color: #bfa;"></div>
    <div id="box1"></div>
  </body>
</html>

事件的委派

image.png

image.png

  • 如果为每一个超链接都绑定一个单击响应函数,这种操作比较麻烦，而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
  • 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的。我们可以尝试将其绑定给元素的共同的祖先元素，即事件委派

事件的委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。

事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

image.png

  • 代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
      window.onload = function() {
 
        var u1 = document.getElementById("u1");
        //点击按钮以后添加超链接
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function() {
          var li = document.createElement("li"); // 创建一个li
          li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
          u1.appendChild(li); // 将li添加到ul中
        };
 
        /*
         * 为每一个超链接都绑定一个单击响应函数
         * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
         *   而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
         */
        var allA = document.getElementsByTagName("a"); // 获取所有的a
        /* for (var i = 0; i < allA.length; i++) { // 遍历
          allA[i].onclick = function() {
            alert("我是a的单击响应函数！！！");
          };
        } */
 
        /*
         * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
         * 我们可以尝试将其绑定给元素的共同的祖先元素
         * 
         * 事件的委派
         *   - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
         *     从而通过祖先元素的响应函数来处理事件。
         *  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
         */
        u1.onclick = function(event) { // 为ul绑定一个单击响应函数
          event = event || window.event;
          /*
           * target
           *   - event中的target表示的触发事件的对象
           */
          // alert(event.target);
          //如果触发事件的对象是我们期望的元素，则执行否则不执行
          if (event.target.className == "link") {
            alert("我是ul的单击响应函数");
          }
        };
 
      };
    </script>
  </head>
  <body>
    <button id="btn01">添加超链接</button>
    <ul id="u1" style="background-color: #bfa;">
      <li>
        <p>我是p元素</p>
      </li>
      <li><a href="javascript:;" class="link">超链接一</a></li>
      <li><a href="javascript:;" class="link">超链接二</a></li>
      <li><a href="javascript:;" class="link">超链接三</a></li>
    </ul>
  </body>
</html>

事件的绑定

通过HTML标签的属性设置

这种写法我们称为结构和行为耦合，不方便维护，不推荐使用。

如果在函数的最后return false则会取消元素的默认行为。

例子：

<button onclick="js代码。。。">按钮</button>

image.png

通过DOM对象的属性绑定

例子：

<button id="btn">按钮</button>
<script>
  var btn = document.getElementById("btn");
  btn.onclick = function(){
  };
</script>

image.png

“对象.事件 = 函数”的形式绑定响应函数，不能绑定多个

image.png

设置事件监听器

addEventListener()：为元素绑定响应函数

  • 参数：

    • 事件的字符串，click不要on。

    • 回调函数，当事件触发时 该函数会被调用。

    • 是否在捕获阶段触发事件，需要一个布尔值，一般都传false。

  • 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行，这个方法不支持IE8及以下的浏览器。

    image.png

attachEvent()：绑定事件【IE8】

  • 参数：

    • 事件的字符串，onclick要on。
    • 回调函数。

  • 这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反。

image.png

可以使用removeEventListener()和detachEvent()移除事件。

addEventListener()中的this，是绑定事件的对象；attachEvent()中的this，是window。需要统一两个方法this。因此定义一个bind()函数

定义bind函数

image.png

事件的传播

概念

  • 关于事件的传播网景公司和微软公司有不同的理解

    • 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
    • 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。

  • W3C综合了两个公司的方案，将事件传播分成了三个阶段：

    • 捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
    • 目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
    • 冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。

  • 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true。一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false，IE8及以下的浏览器中没有捕获阶段。

    image.png

    image.png

取消事件传播

• 我们可以使用event对象的两个方法完成：

– stopPropagation()

– stopImmediatePropagation()

• 取消默认行为：

– preventDefault()

事件相关练习—拖拽

拖拽的流程：

  1. 当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown。
  2. 当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove。
  3. 当鼠标松开时，被拖拽元素固定在当前位置：onmouseup。
  • 代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      #box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
      }
      #box2 {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        left: 200px;
        top: 200px;
      }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        /*
         * 拖拽box1元素
         *  - 拖拽的流程
         *     1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
         *     2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
         *     3.当鼠标松开时，被拖拽元素固定在当前位置  onmouseup
         */
 
        //获取box1
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var img1 = document.getElementById("img1");
 
        drag(box1); // 开启box1的拖拽
        drag(box2); // 开启box2的拖拽
        drag(img1);
      };
 
      /*
       * 提取一个专门用来设置拖拽的函数
       * 参数：开启拖拽的元素
       */
      function drag(obj) {
        //当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
        obj.onmousedown = function(event) {
          //设置box1捕获所有鼠标按下的事件
          /*
           * setCapture()
           *   - 使所有相关事件都绑定到某obj上
           *   - 只有IE支持，但是在火狐中调用时不会报错，
           *     而如果使用chrome调用，会报错
           */
          /*if(box1.setCapture){
            box1.setCapture();
          }*/
          obj.setCapture && obj.setCapture();
          event = event || window.event;
          //div的偏移量 鼠标.clentX - 元素.offsetLeft
          //div的偏移量 鼠标.clentY - 元素.offsetTop
          var ol = event.clientX - obj.offsetLeft;
          var ot = event.clientY - obj.offsetTop;
 
          //为document绑定一个onmousemove事件
          document.onmousemove = function(event) {
            event = event || window.event;
            //当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
            //获取鼠标的坐标
            var left = event.clientX - ol;
            var top = event.clientY - ot;
            //修改box1的位置
            obj.style.left = left + "px";
            obj.style.top = top + "px";
          };
 
          //为document绑定一个鼠标松开事件
          document.onmouseup = function() {
            //当鼠标松开时，被拖拽元素固定在当前位置  onmouseup
            //取消document的onmousemove事件
            document.onmousemove = null;
            //取消document的onmouseup事件
            document.onmouseup = null;
            //当鼠标松开时，取消对事件的捕获
            obj.releaseCapture && obj.releaseCapture();
          };
 
          /*
           * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
           *   此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
           *   如果不希望发生这个行为，则可以通过return false来取消默认行为
           * 
           * 但是这招对IE8不起作用，ie8使用setCapture解决
           */
          return false;
        };
      }
    </script>
  </head>
  <body>
    我是一段文字！
    <div id="box1"></div>
    <div id="box2"></div>
    <img src="img/an.jpg" id="img1" style="position: absolute;" />
  </body>
</html>

滚轮的事件

onmousewheel()：鼠标滚轮滚动的事件，会在滚轮滚动时触发

  • 但是火狐不支持该属性

  • 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件

  • 并且该事件需要通过addEventListener()函数来绑定

image.png

event.wheelDelta：获取鼠标滚轮滚动的方向

  • 在火狐中使用event.detail来获取滚动的方向

image.png

处理“滚动条”

image.png

键盘事件

键盘事件

onkeydown

  • 按键被按下。

  • 对于onkeydown来说：如果一直按着某个按键不松手，则事件会一直触发。

  • 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快。这种设计是为了防止误操作的发生。

onkeyup

  • 按键被松开。

    image.png

键盘事件，一般都会绑定给一些可以获取到焦点的对象或者是document。

通过keyCode来获取按键的编码

image.png

image.png

在onkeydown中取消默认行为：输入的内容，不会出现在文本框中

image.png

使文本框不能输入数字

image.png

练习：移动div（可以根据不同的方向键向不同的方向移动）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      #box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
      }
    </style>
    <script type="text/javascript">
      //使div可以根据不同的方向键向不同的方向移动
      /*
       * 按左键，div向左移
       * 按右键，div向右移...
       */
      window.onload = function() {
        //为document绑定一个按键按下的事件
        document.onkeydown = function(event) {
          event = event || window.event;
          //定义一个变量，来表示移动的速度
          var speed = 10;
          //当用户按了ctrl以后，速度加快
          if (event.ctrlKey) {
            speed = 50;
          }
          /*
           * 37 左
           * 38 上
           * 39 右
           * 40 下
           */
          switch (event.keyCode) {
            case 37:
              //alert("向左"); left值减小
              box1.style.left = box1.offsetLeft - speed + "px";
              break;
            case 39:
              //alert("向右");
              box1.style.left = box1.offsetLeft + speed + "px";
              break;
            case 38:
              //alert("向上");
              box1.style.top = box1.offsetTop - speed + "px";
              break;
            case 40:
              //alert("向下");
              box1.style.top = box1.offsetTop + speed + "px";
              break;
          }
        };
      };
    </script>
  </head>
  <body>
    <div id="box1"></div>
  </body>
</html>

参考：blog.csdn.net/weixin_4494…

avatar
文章
阅读
粉丝