webapis -dom事件类型

事件

事件是编程语言中的术语,它是用来描述程序的行为或状态的,一旦行为或状态发生改变,便立即调用一个函数。

例如:用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片

事件监听

结合 DOM 使用事件时,需要为 DOM 对象添加事件监听,等待事件发生(触发)时,便立即调用一个函数。

addEventListener 是 DOM 对象专门用来添加事件监听的方法,它的两个参数分别为【事件类型】和【事件回调】。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件监听</title>
</head>
<body>
  <h3>事件监听</h3>
  <p id="text">为 DOM 元素添加事件监听,等待事件发生,便立即执行一个函数。</p>
  <button id="btn">点击改变文字颜色</button>
  <script>
    // 1. 获取 button 对应的 DOM 对象
    const btn = document.querySelector('#btn')
​
    // 2. 添加事件监听
    btn.addEventListener('click', function () {
      console.log('等待事件被触发...')
      // 改变 p 标签的文字颜色
      let text = document.getElementById('text')
      text.style.color = 'red'
    })
​
    // 3. 只要用户点击了按钮,事件便触发了!!!
  </script>
</body>
</html>

完成事件监听分成3个步骤:

  1. 获取 DOM 元素

  2. 通过 addEventListener 方法为 DOM 节点添加事件监听

  3. 等待事件触发,如用户点击了某个按钮时便会触发 click 事件类型

  4. 事件触发后,相对应的回调函数会被执行

大白话描述:所谓的事件无非就是找个机会(事件触发)调用一个函数(回调函数)。

事件类型

click 译成中文是【点击】的意思,它的含义是监听(等着)用户鼠标的单击操作,除了【单击】还有【双击】dblclick

<script>
  // 双击事件类型
  btn.addEventListener('dblclick', function () {
    console.log('等待事件被触发...');
    // 改变 p 标签的文字颜色
    const text = document.querySelector('.text')
    text.style.color = 'red'
  })
​
  // 只要用户双击击了按钮,事件便触发了!!!
</script>

结论:【事件类型】决定了事件被触发的方式,如 click 代表鼠标单击,dblclick 代表鼠标双击。

事件处理程序

addEventListener 的第2个参数是函数,这个函数会在事件被触发时立即被调用,在这个函数中可以编写任意逻辑的代码,如改变 DOM 文本颜色、文本内容等。

<script>
  // 双击事件类型
  btn.addEventListener('dblclick', function () {
    console.log('等待事件被触发...')
    
    const text = document.querySelector('.text')
    // 改变 p 标签的文字颜色
    text.style.color = 'red'
    // 改变 p 标签的文本内容
    text.style.fontSize = '20px'
  })
</script>

结论:【事件处理程序】决定了事件触发后应该执行的逻辑。

事件类型

将众多的事件类型分类可分为:鼠标事件、键盘事件、表单事件、焦点事件等,我们逐一展开学习。

鼠标事件

鼠标事件是指跟鼠标操作相关的事件,如单击、双击、移动等。

  1. `mouseenter 监听鼠标是否移入 DOM 元素

<body>
  <h3>鼠标事件</h3>
  <p>监听与鼠标相关的操作</p>
  <hr>
  <div class="box"></div>
  <script>
    // 需要事件监听的 DOM 元素
    const box = document.querySelector('.box');
​
    // 监听鼠标是移入当前 DOM 元素
    box.addEventListener('mouseenter', function () {
      // 修改文本内容
      this.innerText = '鼠标移入了...';
      // 修改光标的风格
      this.style.cursor = 'move';
    })
  </script>
</body>
  1. `mouseleave 监听鼠标是否移出 DOM 元素

<body>
  <h3>鼠标事件</h3>
  <p>监听与鼠标相关的操作</p>
  <hr>
  <div class="box"></div>
  <script>
    // 需要事件监听的 DOM 元素
    const box = document.querySelector('.box');
​
    // 监听鼠标是移出当前 DOM 元素
    box.addEventListener('mouseleave', function () {
      // 修改文本内容
      this.innerText = '鼠标移出了...';
    })
  </script>
</body>

键盘事件

keydown 键盘按下触发 keyup 键盘抬起触发

焦点事件

focus 获得焦点

blur 失去焦点

文本框输入事件

input

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
设计一个webapis学生报名系统的代码步骤如下: 1. 数据库设计:首先确定需要存储的数据,例如学生的基本信息,课程信息等。根据需求设计数据库表结构,并创建相应的表。 2. 后端接口设计:根据系统需求,设计后端接口,包括学生信息的录入、查询、修改和删除等功能。使用合适的编程语言,如Java、Python等,实现这些接口。 3. 前端界面设计:设计一个用户友好的前端界面,包括学生报名表单和查询功能。使用HTML、CSS、JavaScript等技术实现界面的布局和交互,确保用户能够方便地输入和查询信息。 4. 前后端交互:通过AJAX或其他技术,实现前后端的数据交互。前端向后端发送请求,后端处理请求并返回相应的数据。 5. 学生信息录入:在前端界面设计好的报名表单中,用户输入个人信息,通过调用后端接口将数据传递到后台。后台接收并验证输入的数据,并将学生信息存储到数据库中。 6. 学生信息查询:在前端界面设计好的查询功能中,用户输入需要查询的条件,通过调用后端接口将查询条件传递到后台。后台根据查询条件在数据库中查找匹配的学生信息,并将查询结果返回给前端。 7. 学生信息修改和删除:在前端界面设计好的修改和删除功能中,用户选择需要修改或删除的学生信息,并通过调用后端接口将相应的操作请求传递到后台。后台根据请求进行相应的操作,更新或删除数据库中的对应数据。 8. 错误处理和数据校验:在整个系统设计过程中,需要考虑错误处理和数据校验。在后端接口中,对输入的数据进行合法性检查,确保输入的数据符合要求。在前端界面中,对用户的输入进行格式验证,及时反馈给用户。 9. 安全性保障:为了保障系统的安全性,可以采用身份认证、权限控制等机制,确保只有授权的用户能够进行报名和查询等操作。 10. 测试和部署:在完成系统开发后,进行系统的测试和调试。确保系统的正确性和稳定性。最后将系统部署到服务器上,供用户使用。 以上是一个简单的webapis学生报名系统代码步骤,具体实现还需要根据具体需求进行调整和完善。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值