学习理解JavaScript-几个事件(Event)

268 阅读1分钟

这是我参与11月更文挑战的第8天,活动详情查看:2021最后一次更文挑战

前言

前文我们学习了JavaScript 中的知识点--各小结相关阅读:

本文来学习 JavaScript 中的 事件Event, 也是有一些需要注意点

JavaScript Event 事件

JavaScript 中的事件是指用鼠标/键盘等对浏览器页面中的元素进行操作而产生的响应事件, 也可以说是浏览器本身的响应事件. 例如: 使用鼠标点击提交按钮产生的表单数据提交事件, 当我们按下键盘中的某一个按键时产生的键盘事件, 浏览器请求页面后的加载完成产生的事件, 等等.

几个典型的普遍的事件

1. onclick()

在页面中使用鼠标点击某个标签元素(超链接/按钮/选框等)时, 会触发的事件就称为 onclick 事件.

<body>
  <form>
    表单1: <input value='请输入一些要提交的内容' type="text" id="text1"/>
    <br/>
    表单2: <input value='请输入一些要提交的内容' type="text" id="text2"/>
    <br/>
    <!-- 调用事件函数时 参数 event -->
    <button onclick="submitData(event)">这是一个按钮, 点击产生 onclick 事件</button>
  </form>
  
  <script>
      // 这里定义事件函数 参数同上 为 event
      function submitData(event) {
        let text1 = document.getElementById('text1')
        if(text1.value === '') {
          alert('text1 不能为空')
          console.log('text1 不能为空', text1.value)
        }
        let text2 = document.getElementById('text2')
        if(text2.value === '') {
          alert('text2 不能为空')
          console.log('text2 不能为空', text2.value)
        }
      }
  </script>
<body>

2. onkeydown() 事件

onkeydown() 事件是当我们按下键盘上的某个按键时产生的触发事件.

3. onload() 事件

onload() 事件是浏览器的事件: 当浏览器已经完成对页面的加载后所产生的事件: onload事件

相关阅读

  1. JavaScript学习理解-自动类型转换
  2. JavaScript 学习理解-Number-这是一个函数
  3. JavaScript 中的中缀运算符
  4. 你知道 JavaScript 的 typeof 是什么吗?

加油

Buy Less by Know More!

学习, 记录, 积累 是一个漫长的过程! 加油!