日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

對象的綁定、滾輪滾動事件及鍵盤事件

作者：1900's 88 keys 更新時間： 2022-01-16 編程語言

對象的綁定

  • 使用 對象.事件 = 函數的形式綁定響應函數，只能同時為一個元素的一個事件綁定一個響應函數
  • 不能綁定多個，如果綁定多個，則后面會覆蓋前面的
  • 這是DMO0的寫法

addEventListener()

  • DOM2為我們提供了一個新的綁定元素響應函數
  • 參數：
    • 第一個，事件的字符串，不要on
    • 第二個，回調函數，當事件觸發時該函數會被調用
    • 第三個，是否在捕獲階段觸發事件，布爾值，一般是默認false
  • 可以同時為一個元素的相同事件同時綁定多個響應函數，當事件被觸發時，響應函數會按照函數的綁定屬性執行
  • addEventListener()中的this是綁定事件的對象
  • IE8及以下瀏覽器不支持

attachEvent()

  • 在IE8中可以使用attachEvent()來綁定事件函數
  • 參數：
    • 第一個，事件的字符串，要on
    • 第二個，回調函數
  • 這個方法也可以同時為一個事件綁定多個響應函數，不同的是，它是后綁定先執行，執行順序和addEventListener()相反
  • attachEvent()中的this是window
  • 其他瀏覽器不支持

兩個方法的兼容性函數

  • 定義一個函數，用來為指定元素綁定響應函數
  • addEventListener()中的this是綁定事件的對象
  • attachEvent()中的this是window
  • 需要統一兩個方法this

參數：

  • obj要綁定事件的對象
  • eventStr事件的字符串
  • callback回調函數

代碼：

    function bind(obj, eventStr, callback){
      //大部分瀏覽器兼容的方式
      if(obj.addEventListener){
        obj.addEventListener(eventStr, callback, false);
      }else{
        //IE8及以下
        obj.attachEvent("on"+eventStr, function(){
          callback.call(obj);
        });
      }
    }

鼠標滾輪滾動事件

onmousewheel

  • onmousewheel鼠標滾動事件，會在滾輪滾動時觸發
  • 火狐不支持該屬性

DOMMouseScroll

  • 在火狐中需要使用來綁定滾動事件
  • 該事件需要通過addEventListener()函數來綁定

wheelDelta

  • e.wheelDelta可以獲取鼠標滾輪滾動的方向
  • 向上滾：正數120，向下滾：負數-120
  • 火狐中不支持

detail

  • 在火狐中使用e.detail來獲取滾動的方向
  • 向上滾：正數，向下滾：負數

鍵盤事件

  • 按鍵事件一般都會綁定給一些可以獲取到焦點的對象或者是document

keypress

  • 當鍵盤的某個鍵被按下時觸發,不能識別功能鍵
  • 保存的是按鍵的ASCII碼值
  • 區分字母的大小寫

onkeydown

  • 按鍵被按下
  • 保存的是按鍵的虛擬鍵碼
  • 不區分字母的大小寫
  • 對于onkeydown來說如果一直按著某個按鍵不松手，則事件會一直觸發
  • 當onkeydown連續觸發時，第一次和第二次之間會間隔會稍微長一點，其他的會非常的快，這種設計是為了防止誤操作的發生。

onkeyup

  • 按鍵被松開
  • 不區分字母的大小寫

keyCode

  • e.keyCode事件來獲取按鍵的編碼
  • 可以通過它判斷那個按鍵被按下
  • 除了keyCode，事件對象中還提供以下屬性
    • altKey
    • ctrlKey
    • shiftKey
    • 可以用上面三個屬性來判斷alt ctrl 和shift是否同時按下
    • 如果按下則返回true,否則false

鍵盤移動DIV

在這里插入圖片描述
代碼

<!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 () {
      document.onkeydown = function (event) {
        event = event || window.event;
        let speed = 10;
        //當用戶按下Ctrl鍵以后速度變快
        if(event.ctrlKey)
        {
          speed = 50;
        }
        /*
         * 左鍵 37
         * 上鍵 38
         * 右鍵 39
         * 下鍵 40
         */
        var box = document.querySelector("#box")
        switch (event.keyCode) {
          case 37://左移
            box.style.left = box.offsetLeft - speed + 'px';
            break;
          case 38://上移
            box.style.top = box.offsetTop - speed + 'px';
            break;
          case 39://右移
            box.style.left = box.offsetLeft + speed + 'px';
            break;
          case 40://下移
            box.style.top = box.offsetTop + speed + 'px';
            break;
        }
      }
    }
  </script>
</head>

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

</html>

原文鏈接：https://blog.csdn.net/weixin_45660621/article/details/121748660

欄目分類
最近更新