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 () {
        // this
        console.log("您已经选择了文本框!");
    }

?下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，myForm 函数就会被调用。假若域的值无效，此次提交就会被取消。myForm函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。

 /* 为表单绑定提交事件 */
    myForm.onsubmit = function () {
        let userCode = document.getElementById("userCode").value;
        let userPwd = document.getElementById("userPwd").value;
        var reg = /^[A-Za-z0-9]{6,12}$/;
        console.log("触发了表单的提交事件！");
        if (userCode == '') {
            alert("账号不能为空");
        } else if (userCode.length < 6 || userCode.length > 12) {
            alert("账号长度错误");
        } else if (!reg.test(userCode)) {
            alert("账号只能为字母与数字!");
        } else if (userPwd == '') {
            alert("密码不能为空");
        } else if (userPwd.length < 6 || userPwd.length > 12) {
            alert("密码长度错误");
        } else if (!reg.test(userPwd)) {
            alert("密码只能为字母与数字!");
        } else {
            return true;
        }
        // return true:可以提交  false 不能提交
        return false;
    }

  //onclick:点击事件
  butA.onclick = function () {
      console.log("点击");
  }

---

3，键盘事件

键盘事件是指用户在使用键盘时触发的事件。例如，用户按【Esc】键关闭打开的状态栏，按【Enter】键直接完成光标的上下切换等。

值	描述
onkeydown：	当键盘上的某个按键被按下时触发此事件
onkeyup：	当键盘上的某个按键被按下后弹起时触发此事件
onkeypress：	当输入有效的字符按键时触发此事件

 //  键盘按下事件 
       window.onkeydown = function (event) {
           // 解决兼容问题 
           event = event || window.event;
           console.log("键盘按下了" + event.keyCode);
           if (event.keyCode == 13) {
               console.log('按下了回车');
           }
       }
 
    /* onkeyup： 当松开按键时 触发 */
   window.onkeyup = function (event) {
 
        event = event || window.event;
 
        console.log("键盘按下了" + event.keyCode);
        if (event.keyCode == 13) {
            console.log('按下了回车');
        }
    }
 
    /* 键盘 按下并松开时*/
    window.onkeypress = function (event) {
        event = event || window.event;
        console.log("键盘按下了" + event.keyCode);
        if (event.keyCode == 13) {
            console.log('按下了回车');
        }
    }

我们通过一个小案例来了解下按键的触发：

<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .divStyle {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="box" class="divStyle">
 
</div>
 
<script>
   
   var box = document.getElementById("box");
    document.onkeydown = function (event) {
        event  = event ||window.event;
 
        switch (event.keyCode) {
            case 37:
                box.style.left = box.offsetLeft - 10+'px';
                break;
            case 39:
                box.style.left = box.offsetLeft + 10+'px';
                break;
            case 38:
                box.style.top = box.offsetTop - 10+'px';
                break;
            case 40:
                box.style.top = box.offsetTop + 10+'px';
                break;
        }
    }
</script>

键盘上每个按键都有对应的值，通过值传递给页面进行相应。

---

4，鼠标事件

鼠标事件是指通过鼠标动作触发的事件。

值	描述
onclick：	鼠标单击时触发此事件
ondblclick：	鼠标双击时触发此事件
onmousedown：	鼠标按下时触发此事件
onmouseup：	鼠标弹起时触发的事件
onmouseover：	鼠标移动到某个设置了此事件的元素上时触发此事件
onmousemove：	鼠标移动时触发此事件
onmouseout：	鼠标从某个设置了此事件的元素上离开时触发此事件
onscroll :	当滚动元素的滚动条运行时
onmousewheel:	当鼠标的滚轮运行时

<body>
<div onmouseover="divMouseover()"
     onmouseout="divMouseout()"
     style="width: 300px;height: 300px;background: red">
    <div onmouseover="divMouseover()"
         onmouseout="divMouseout()"
         style="width: 100px;height: 100px;background: pink">
 
 
    </div>
</div>
<script>
    window.onclick = function () {
        console.log("鼠标单击事件");
    }
 
    window.ondblclick = function () {
        console.log("鼠标双击事件");
    }
 
    window.onmousedown = function () {
        console.log("当鼠标按钮按下运行时");
    }
 
    window.onmouseup = function () {
        console.log("当鼠标按钮运行时");
    }
 
    /* onmouseover 当鼠标移入时  不能阻止冒泡  */
    function divMouseover() {
        console.log("当鼠标进入了当前的DIV");
    }
    /* onmouseout : 当鼠标移出时  不能阻止冒泡*/
    function divMouseout() {
        console.log("当鼠标移出了当前的DIV");
    }
</script>
 
 
</body>

<body>
<div onmouseenter="divMouseenter()"
     onmouseleave="divMouseleave()"
     style="width: 300px;height: 300px;background: red">
    <div onmouseenter="divMouseenter()"
         onmouseleave="divMouseleave()"
         style="width: 100px;height: 100px;background: pink">
    </div>
</div>
 
<div id="box" style="overflow: scroll;width: 200px;height: 200px;">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
</div>
 
<script>
    /* onmouseenter ： 可以阻止事件冒泡 */
    function divMouseenter() {
        console.log("当鼠标进入了当前的DIV");
    }
    /* onmouseleave ： 可以阻止事件冒泡 */
    function divMouseleave() {
        console.log("当鼠标移出了当前的DIV");
    }
    document.getElementById("box").onscroll = function () {
        console.log("当滚动元素的滚动条运行时");
    }
    /* 当鼠标的滚轮运行时 */
    window.onmousewheel=function (){
        console.log("当鼠标的滚轮运行时");
    }
 
</script>
 
 
</body>

这些基本上就是JavaScript 中常用的事件！

---

?最后?

总结不易，希望uu们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！
如有问题，欢迎评论区批评指正😁