对象的绑定、滚轮滚动事件及键盘事件

1900's 88 keys

于 2021-12-06 17:19:12 发布

阅读量1.1k

点赞数 4

分类专栏：正在路上的前端攻城狮的烂笔记 # JavaScript 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_45660621/article/details/121748660

版权

正在路上的前端攻城狮的烂笔记同时被 2 个专栏收录

90 篇文章 2 订阅

订阅专栏

JavaScript

58 篇文章 4 订阅

订阅专栏

对象的绑定

使用 对象.事件 = 函数的形式绑定响应函数，只能同时为一个元素的一个事件绑定一个响应函数
不能绑定多个，如果绑定多个，则后面会覆盖前面的
这是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>

1900's 88 keys

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
对象的绑定、滚轮滚动事件及键盘事件

键盘事件按键事件一般都会绑定给一些可以获取到焦点的对象或者是documentkeypress当键盘的某个键被按下时触发,不能识别功能键保存的是按键的ASCII码值区分字母的大小写onkeydown按键被按下保存的是按键的虚拟键码不区分字母的大小写对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发当onkeydown连续触发时，第一次和第二次之间会间隔会稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生。onkeyup按键被松开不区分字母
复制链接

扫一扫