JavaScript 中常用事件演示【详解】

✨前言✨
  本篇文章主要在于了解下在JavaScript中什么是事件？及使用

🍒欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获，友友们有任何问题可以在评论区留言

---

🍎一，JavaScript的事件介绍

 JS（JavaScript） 是基于对象 （Object-based）、事件驱动的脚本语言。

 JS事件，就是用户或浏览器本身的某种行为，一般是用户对页面的一些动作引起的，例如，单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。JS（JavaScript） 与 HTML 之间的交互是通过事件 （event） 实现的，或者说，事件是JavaScript 和 DOM之间进行交互的桥梁。

 一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onload 等。

---

🍎二，在JavaScript中什么是事件？

  JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

 基本原理

 当我们在某个元素上添加一个事件时，根据事件执行的前后可以把它当成一个事件流，例如在 DOM 事件中规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后是冒泡阶段，可以在这个阶段对事件做出响应。

---

🍎三，JavaScript常见的事件大体分类及常用事件

1，窗口事件

当鼠标打开页面后，再点击其他文件窗口是就会触发焦点事件

值	描述
onblur :	失去焦点
onfocus:	获得焦点
onload:	窗口加载事件
onresize:	窗口大小缩放事件

  /*  当窗口失去焦点时 */
  window.onload = function () {
   
   
      console.log('窗口失去了焦点')
  }
  /*  当窗口获得焦点时 */
  window.onfocus = function (){
   
   
      console.log('窗口获得了焦点')
  }

  /* 窗口加载完成后*/
  window.onload = function (){
   
   
      console.log('窗口加载了')
  }
  /*  窗口大小改变时 事件 */
  window.onresize = function () {
   
   
      console.log('窗口大小缩放了')
  }

---

2，表单事件

值	描述
onchange：	内容改变事件
oninput ：	当文本框内容改变时 ，立即将改变内容 输出在控制台
oninvalid:	获取表单 未能提交时
onselect:	当文本框内容被选中时
onsubmit:	为表单绑定提交事件
onclick:	点击事件

onFocus 和 onChange 事件通常相互配合用来验证表单。

  /* onchange 内容改变事件   */
  userCode.onchange = function(){
   
   
    console.log(userCode.value)
  }
  /* oninput 当文本框内容改变时  ，立即将改变内容 输出在控制台 */
  userCode.oninput = function (){
   
   
    console.log(userCode.value)
  }

 // 获取表单 未能提交时
    userCode.oninvalid = function () {
   
   
        console.log("请您完成表单的内容!");
    }
    /* 当文本框内容被选中时 */
    userCode.onselect = function