JavaScript中的事件监听

最新推荐文章于 2024-07-22 15:13:59 发布
最新推荐文章于 2024-07-22 15:13:59 发布
阅读量265 收藏 9
点赞数 4
文章标签： javascript 开发语言 ecmascript 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79614379/article/details/138763804
版权

文章目录

事件监听

事件：在编程时系统内发生的动作，比如用户在网页上单击一个按钮。

事件监听：让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也被称为绑定事件或注册事件。比如鼠标经过时显示下拉菜单，比如点击可以播放轮播图等。

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

事件监听三要素：

  • 事件源：被触发的元素
  • 事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
  • 事件调用的函数：要做什么事
const but = document.querySelector('button')
but.addEventListener('click', function () {
  alert('welcome')
})

on方式div.onclick = function(){}同样可以实现事件监听，但会被覆盖，addEventListener方式可以绑定多次。

事件类型

  • 鼠标触发
    • click：鼠标点击
    • mouseenter：鼠标经过
    • mouseleave：鼠标离开
  • 表单获得光标
    • focus：获得焦点
    • blur：失去焦点
  • 键盘触发
    • Keydown：键盘按下触发
    • Keyup：键盘抬起触发
  • 表单输入触发
    • input：用户输入事件

鼠标触发类型案例——轮播图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .con div {
      width: 200px;
      height: 200px;
      background-size: 200px 200px;
    }

    ul {
      list-style: none;
    }

    li {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: blue;
      float: left;
      margin: 0 5px;
      vertical-align: middle;
    }

    ul {
      display: flex;
      align-items: center;
    }

    .active {
      width: 8px;
      height: 8px;
    }
  </style>
</head>

<body>
  <div class="con">
    <div></div>
    <ul>
      <li class="active"></li>
      <li></li>
      <li></li>
      <button class="last">last</button>
      <button class="next">next</button>
    </ul>
  </div>
  <script>
    const arr = ['url(../图片/微信图片_20231114204518.jpg)', 'url(../图片/微信图片_20231114204634.jpg)', 'url(../图片/微信图片_20231114204549.jpg)'] // 图片链接记得加url()
    let i = 0;
    const back = document.querySelector('.con div')
    back.style.backgroundImage = arr[i]
    let li = document.querySelector(`ul li:nth-child(${i + 1})`)
    function xyg() {
      li.classList.remove('active')
      i++
      if (i == 3) {
        i = 0
      }
      back.style.backgroundImage = arr[i]
      li = document.querySelector(`ul li:nth-child(${i + 1})`)
      li.classList.add('active')
    }
    let n = setInterval(xyg, 2000)
    const next = document.querySelector('.next')
    next.addEventListener('click', xyg)
    const last = document.querySelector('.last')
    last.addEventListener('click', function () {
      li.classList.remove('active')
      i--
      if (i == -1) {
        i = 2
      }
      back.style.backgroundImage = arr[i]
      li = document.querySelector(`ul li:nth-child(${i + 1})`)
      li.classList.add('active')
    })
    const con = document.querySelector('.con')
    con.addEventListener('mouseenter', function () {
      clearInterval(n)
    })
    con.addEventListener('mouseleave', function () {
      n = setInterval(xyg, 2000)
    })
  </script>
</body>

</html>

表单获得光标类型类型案例——点击搜索框获得下拉表单

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 200px;
      margin: 0 auto;
    }

    * {
      padding: 0;
      margin: 0;
    }

    ul {
      list-style: none;
    }

    .list {
      border: 1px solid #bbb;
      display: none;
      position: absolute;
      left: 0;
      top: 21px;
    }

    li {
      border-bottom: 1px solid #bbb;
      width: 80px;
    }
  </style>
</head>

<body>
  <div class="box">
    <input type="text" name="" id="">
    <div class="list">
      <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
      </ul>
    </div>
  </div>
  <script>
    const list = document.querySelector('.list')
    function fn() {
      list.style.display = 'block'
    }
    function kn() {
      list.style.display = 'none'
    }
    const inp = document.querySelector('input')
    inp.addEventListener('focus', fn)
    inp.addEventListener('blur', kn)
  </script>
</body>

</html>

键盘触发类型效果展示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" name="" id="">
  <script>
    const inp = document.querySelector('input')
    inp.addEventListener('keydown', function () {
      console.log('按下键盘');
    })
    inp.addEventListener('keyup', function () {
      console.log('键盘弹起');
    })
  </script>
</body>

</html>

表单输入触发类型案例——统计表单字符数量

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .text {
      position: relative;
      width: 200px;
      height: 100px;
      margin: 100px auto;
    }

    textarea {
      width: 200px;
      height: 100px;
      resize: none;
    }

    .text div {
      position: absolute;
      color: #ccc;
      bottom: 0;
      right: 0;
      width: 50px;
      height: 20px;
      opacity: 0;
      font-size: 10px;
    }
  </style>
</head>

<body>
  <div class="text">
    <textarea name="" id=""></textarea>
    <div>0/300</div>
  </div>
  <script>
    const text = document.querySelector('textarea')
    const div = document.querySelector('.text div')
    text.addEventListener('focus', function () {
      div.style.opacity = 1
      div.innerHTML = `${text.value.length} / 300`
    })
    text.addEventListener('blur', function () {
      div.style.opacity = 0
    })
    text.addEventListener('input', function () {
      div.innerHTML = `${text.value.length} / 300`
    })
  </script>
</body>

</html>

事件对象

事件对象也是个对象，这个对象里有事件触发时的相关信息，例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息。

使用场景：

  • 可以判断用户按下哪个键，比如按下回车键可以发送消息
  • 可以判断鼠标点击了哪个元素，从而做出相应的操作

在事件绑定的回调函数的第一个参数就是事件对象：元素.addEventListener('click',function (e){}) // e是事件对象

常用属性

  • type：获取当前事件类型
  • clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
  • offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
  • key：用户按下键盘的值（现在不提倡使用keyCode）

环境对象

环境对象指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境，this指向函数的调用者。

普通函数里this指向的是window。

回调函数

如果将函数A作为参数传递给函数B时，我们称函数A为回调函数。

    function fn() {   // 这是一个回调函数
      list.style.display = 'block'
    }
    const inp = document.querySelector('input')
    inp.addEventListener('focus', fn)
青青青青草地
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript常用事件监听方法
猿码互联
05-15 610
在JavaScript中，事件监听方法可以用来捕捉和处理用户与网页交互过程中的各种事件，比如点击按钮、鼠标移动、键盘输入等。以上就是JavaScript中常用的事件监听方法的详细解析和代码实例讲解。你可以根据需求选择合适的方法来监听不同类型的事件，并在相应的函数中执行相应的操作。
JavaScript事件监听器总结
Maybe_ss的博客
10-19 3647
事件监听总结，事件流，捕获阶段、目标阶段、冒泡阶段，事件代理，阻止事件冒泡，阻止默认事件。
JavaScript之事件监听
qq_43751200的博客
06-06 1226
JavaScript之事件监听
JavaScript事件监听
CSPsy的博客
03-06 3323
JavaScript事件监听 常用的事件监听 DOM0级事件监听 DOM2级事件监听 onclick addEventListener
JavaScript监听事件
loneii的博客
06-19 2243
JavaScript实现事件监听的方法
移除 JavaScript 中事件监听器的几种方法
VvpApplescript的博客
09-17 9277
在上面的代码中，我们首先定义了一个事件监听器 handleClick()，然后使用 addEventListener() 将它添加到 id 为 “myButton” 的按钮上。需要注意的是，如果我们直接在 removeEventListener() 中使用匿名函数，那么事件监听器将无法被正确移除。在上面的代码中，我们将事件监听器添加到父元素上，并在事件处理函数中检查事件目标是否是我们感兴趣的子元素。如果是，我们执行相应的操作。在这种情况下，移除事件监听器的方法稍有不同，我们需要在移除时使用相同的匿名函数。
八、JavaScript：事件监听器
斯文~
09-20 1072
JavaScript：事件监听器
理解 DOM 事件和 JavaScript 事件监听器
xiaoshun007的专栏
02-13 863
DOM 事件是浏览器暴露的信号，你可以利用这些信号运行一段 JavaScript 代码。这些 DOM 事件会在用户与我们创建的应用程序进行交互时发生，例如点击按钮或在输入框中输入字母。作为 web 开发人员，你可以指示 JavaScript 监听特定事件，并对该事件做出响应。点击按钮时，更改段落文本。提交表单时，使用 Fetch API 发送 POST 请求。通过浏览器暴露的 DOM 事件，你可以以适当的方式响应用户操作。
JavaScript的事件监听
Welisit的博客
09-15 5061
用户点击了某个按钮响应编写处理程序如何进行事件监听呢？scripton。
javaScript：事件注册与事件监听
qq_52799985的博客
09-13 945
在JavaScript中，可以使用事件注册和事件监听来处理网页上的交互和用户操作。事件注册是指将事件处理函数与特定的事件关联起来，以便在事件触发时执行相应的代码。事件监听是一种更高级的事件处理方式，它能够在同一个元素上同时监听多个事件，并在事件触发时执行相应的处理函数。
JavaScript监听触摸事件代码实例
10-15
在本文中，我们将深入探讨如何使用JavaScript监听触摸事件，并通过代码实例来理解其工作原理。 首先，触摸事件主要有三个基本事件类型： 1. `touchstart`：当用户首次触摸屏幕时触发，标志着一个触摸序列的开始。 ...
javascript监听鼠标滚轮事件浅析
10-25
主要介绍了javascript监听鼠标滚轮事件浅析,使用具体例子说明,同时考虑了不同的浏览器,需要的朋友可以参考下
javascript事件监听与事件委托实例详解
10-16
主要介绍了javascript事件监听与事件委托,结合实例形式详细分析了javascript事件监听与事件委托相关原理、用法与操作注意事项,需要的朋友可以参考下
JavaScript 监听textarea中按键事件
12-12
有个textarea， Java代码 代码如下: <textarea id=”text”></textarea> 经常会定义onKeyPress=”keypress();”,并定义以下方法。 代码如下: var keypress = ... 这里使用的which就不论在IE下还是FF中，是
javascript 组合按键事件监听实现代码
12-09
JavaScript中的组合按键事件监听是网页交互中的一种常见需求，它允许开发者监听用户按下特定的组合键，例如Ctrl+C、Alt+F4等。在给定的描述和代码中，`dqKeys`是一个实现了组合按键监听功能的JavaScript库。下面将...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 263
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
VUE中的重点*
最新发布
qq_61132537的博客
07-22 641
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
jquery-选择器常见用法
随笔
07-18 208
jquery-选择器，对象下有多个子元素时如何选择
JavaScript API事件监听与错误模式自动检测
JavaScript中的许多流行事件驱动API允许事件名称作为自由格式字符串指定，这可能导致问题：没有注册监听器的丢失事件和永远不会发出的无效事件监听器。 文章指出，虽然Madsen等人之前提出了一种精确的静态分析方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值