事件对象

最新推荐文章于 2024-02-01 09:19:56 发布

小崽子o

最新推荐文章于 2024-02-01 09:19:56 发布

阅读量394

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_64352881/article/details/123809118

版权

事件对象的常用属性

 <body>
    <div
      id="box"
      style="width: 200px;
    height: 200px;background-color: red"
    ></div>

    <script>
      /* 
      1.事件对象 :  存储与事件相关的数据。  当我们触发事件的时候，浏览器会自动捕捉触发时的鼠标(坐标点)和键盘信息(按键)，存入一个对象中，称之为事件对象。
        * 事件对象： 存储与事件触发相关的数据
        * 事件对象是浏览器自动存储的，我们只需要获取即可
      
      2.获取事件对象 ： 给事件处理函数添加形参  event | ev | e
        
      3.事件对象e常用属性和方法总结 :
        3.1 阻止默认事件(a和form)  :   e.preventDefault()
        3.2 获取鼠标触发点         :  e.pageX / e.pageY
      */

      document.querySelector('#box').onclick = function(e){
        //鼠标触发点到屏幕左上角距离
        console.log( e.pageX , e.pageY )
        
      }

      
    </script>
  </body>

鼠标跟随移动

 <style>
      img {
        position: absolute;
        left: 0;
        top: 0;
      }
    </style>
  </head>
  <body>
    <img src="./tianshi.gif" alt="" />

    <script>
      /* 
      1.鼠标事件
        onclick : 鼠标单击
        ondblclick : 鼠标双击
        onmouseenter: 鼠标移入
        onmouseleave: 鼠标移出
        onmousemove : 鼠标移动

      2.页面鼠标移动 :   window.onmousemove
      
      */

      //给页面注册鼠标移动
      window.onmousemove = function(e){
        console.log(e.pageX,e.pageY)
        let img = document.querySelector('img')
        //获取事件对象的page坐标， 赋值给图片的定位属性即可(需要注意left有单位px)
        img.style.left = e.pageX + 'px'
        img.style.top = e.pageY + 'px'

      }
    </script>

  </body>

键盘事件与获取按键

<body>
    <input type="text" placeholder="请输入内容" />

    <script>
      /* 
      获取键盘按键 : 有两种方式
        e.key : 获取按键字符串  'Enter'
        e.keyCode :  获取按键ASCII码（每一个按键对应一个数字）
      */

      let input = document.querySelector('input')

      //键盘按下
      input.onkeydown = function(e){
        console.log('按下键盘');
        console.log(e.key,e.keyCode);
        if( e.keyCode == 13 ){
          alert('按了enter键,执行搜索功能')
        }
      }

      //键盘松开
      input.onkeyup = function(){
        console.log('松开键盘');  
      }
    </script>
  </body>