事件委托（代理）/ 鼠标事件对象/ 键盘事件 /案例：跟随鼠标移动的图片/案例：模拟京东按键输入内容

最新推荐文章于 2022-04-20 10:06:33 发布

httpkaidi

最新推荐文章于 2022-04-20 10:06:33 发布

阅读量91

点赞数

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/httpkaidi/article/details/121617882

版权

javascript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

事件委托

也称为事件代理，在jQuery里称为事件委派

是事件冒泡带来的好处

原理：不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

提高了程序的性能

例：

 <body>
    <ul>
      <li>点击</li>
      <li>点击</li>
      <li>点击</li>
      <li>点击</li>
    </ul>
    <script>
      var ul = document.querySelector("ul");
      ul.addEventListener("click", function (e) {
        //给ul 设置的事件，但点击每个li 都会弹出对话框
        alert("我是li");
        //也可给li设置点击后li的背景颜色变换
        e.target.style.backgroundColor = "pink";
      });
    </script>
  </body>

鼠标事件对象
client鼠标在可视区的 X 和 Y 坐标

e.clientX 返回鼠标相对于浏览器窗口可视区的坐标X。

e.clientY 返回鼠标相对于浏览器窗口可视区的坐标Y

page 鼠标在页面文档的 X 和 Y 坐标

e.pageX 返回鼠标相对于页面文档的坐标X IE9+ 支持

e.pageY 返回鼠标相对于页面文档的坐标Y IE9+ 支持

screen 鼠标在电脑屏幕的 X 和 Y 坐标

e.screenX 返回鼠标相对于电脑屏幕的 X 坐标

e.screenY 返回鼠标相对于电脑屏幕的 Y 坐标

    document.addEventListener("click", function (e) {
        //1.client : 鼠标在可视区的 x 和 y 坐标
        console.log(e.clientX);
        console.log(e.clientY);
        //2.page : 鼠标在页面文档的 x 和 y 坐标
        console.log(e.pageX);
        console.log(e.pageY);
        //3.screen 鼠标在电脑屏幕的 X 和 Y 坐标
        console.log(e.screenX);
        console.log(e.screenY);
      });

案例：跟随鼠标移动的图片

案例分析：

鼠标不断地移动使用鼠标事件 mousemove
在页面中，给document 注册事件
图片要移动距离，而且不占位置，使用绝对定位即可
核心原理：每次鼠标移动，

都会获得新的鼠标坐标，把这个 x 和 y 坐标设为图片 top left 值即可

 <style>
      img {
        position: absolute;
        width: 80px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <img src="images/pig.gif" alt="" />
    <script>
      var img = document.querySelector("img");
      document.addEventListener("mousemove", function (e) {
        //mousemove 只要移动鼠标，都会触发这个事件
        var x = e.pageX;
        var y = e.pageY;
        //千万不要忘记给x y 加单位
        img.style.left = x + "px";
        img.style.top = y + "px";
      });
    </script>
  </body>

键盘事件

onkeyup：释放某个键盘键时触发。
onkeydown：在键盘上按下某个键时触发。
onkeypress：按下某个键盘键时触发。但不能识别功能键ctrl shift 左右箭头等。
执行顺序：down -> press ->up

更多使用：keyup keydown

    //1.onkeyup  释放某个键盘键时触发
      document.onkeyup = function () {
        console.log("我弹起了");
      };

    //  或  document.addEventListener('keyup',function(){
    //       console.log("我弹起了");
    //      })

      //2.onkeydown  在键盘上按下某个键时触发
      document.onkeydown = function () {
        console.log("我弹起了");
      };
      //3.onkeypress  按下某个键盘键时触发。但不能识别功能键ctrl shift 左右箭头等。
      document.onkeypress = function () {
        console.log("我弹起了");
      };

键盘事件对象
keyup keydown 都不区分大小写值 a和A 得到的都是65

keypress 区分大小写值比如：a和A 得到的都是65

注意：keydown 和 keypress 在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中，keyup 事件触发的时候，文本已经落入文本框里了

     //键盘事件对象的keyCode属性可以得到想要的ASCII码值
      document.addEventListener("keyup", function (e) {
        if (e.keyCode == 65) {
          console.log("您按下了a键");
        } else {
          console.log("您没有按下a键");
        }
      });

案例：模拟京东按键输入内容

当按下s键，光标就自动定位到搜索框
核心思路：

检测用户是否按下s键，如果按下了，就把光标自动定位到搜索框
使用键盘事件对象里面的keyCode来判断用户按下的是否是s键

搜索框获得焦点：使用js中的 focus()方法

    <input type="text" />
    <script>
      var search = document.querySelector("input");
      document.addEventListener("keyup", function (e) {
        console.log(e.keyCode);
        if (e.keyCode === 83) {
          search.focus();
        }
      });
    </script>

httpkaidi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件委托（代理）/ 鼠标事件对象/ 键盘事件 /案例：跟随鼠标移动的图片/案例：模拟京东按键输入内容

事件委托也称为事件代理，在jQuery里称为事件委派是事件冒泡带来的好处原理：不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点提高了程序的性能例： <body> <ul> <li>点击</li> <li>点击</li> <li>点击</li> <li>点击</l
复制链接

扫一扫