JavaScript-事件监听及对象

7_35Durant

已于 2024-06-18 18:32:01 修改

阅读量260

点赞数 1

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2024-06-14 16:55:03 首次发布

本文链接：https://blog.csdn.net/Kevin7_35Durant/article/details/139677585

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

添加事件监听

语法：对象名.addEventListener('事件类型',要执行的函数)

作用：当事件触发时，就调用这个函数
事件类型：比如用鼠标点击，或用滚轮滑动，鼠标经过这些
要执行的函数：要做的事

<body>
  <button>点击按钮</button>
  <script>
    document.querySelector('button').addEventListener('click',function(){
      alert('what can i say')
    })
  </script>
</body>

事件类型

鼠标事件：由鼠标去触发这个事件
焦点事件：由光标去触发这个事件
键盘事件：由键盘触发这个事件
文本事件：表单输入触发这个事件

焦点事件

<body>
    <div class="mi">
        <input type="search" placeholder="笔记本">
        <ul class="result-list">
            <li><a href="#">惠普</a></li>
            <li><a href="#">红米</a></li>
            <li><a href="#">联想</a></li>
            <li><a href="#">华为</a></li>
            <li><a href="#">外星人</a></li>
        </ul>
    </div>
    <script>
   const input=document.querySelector('.mi input')
   const ul=document.querySelector('ul');
   input.addEventListener('focus',function(){
     ul.style.display='block';
   })
   input.addEventListener('blur',function(){
     ul.style.display='none';
   })


    </script>
</body>

当这个input标签获取到焦点时，出现了笔记本的种类

键盘事件

用对象名.value可以获取到键盘输入的值

<body>
        <input type="text" placeholder="笔记本">
    <script>
        const box=document.querySelector('input');
        box.addEventListener('input',function(){
            console.log(box.value);
        })
    </script>
</body>

事件对象

事件对象也是一个对象

事件对象存放了多个属性，像鼠标位置这些

在事件监听里面回调函数第一个参数就是事件对象

一般命名为event、ev、e
  元素.addEventListener('事件',function(event){})

事件对象常用的属性

type:获取当前事件的类型
clientX/clientY: 获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY: 获取光标相对于当前DOM元素左上角的位置
key: 用户按下键盘输入的值

<body>
  <div></div>
  <script>
  const box=document.querySelector('div');
  box.addEventListener('click',function(e){
    console.log(e.offsetX,e.offsetY);
  })
  </script>
</body>

当我们点击这个标签元素时，控制台会输出当前光标(坐标的位置相对于浏览器窗口的左上角)的坐标