JavaScript事件概述

最新推荐文章于 2023-08-15 16:43:35 发布

锡伯利亚

最新推荐文章于 2023-08-15 16:43:35 发布

阅读量295

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/X18406432083/article/details/126770512

版权

一.什么是事件

事件就是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键时触发的事情，事件还可能是Web浏览器中发生的事情，比如说某个Web页面加载完成，或者是用户滚动窗口或改变窗口大小。简单的说:事件是文档或浏览器中发生的特定交互瞬间。

二.JavaScript中常用的事件

1.窗口事件

onblur 失去焦点事件
onfocus 获得焦点事件
onload 加载完成后事件
onresize 窗口大小改变事件

案例:

    /*  当窗口失去焦点时 */
     window.onblur = function () {
         console.log('窗口失去了焦点！');
     }

    /*  当窗口获得焦点时 */
     window.onfocus = function () {
         console.log('窗口获得了焦点！');
     }
    /*  窗口加载完成后*/
     window.onload =function () {
         console.log("窗口加载完成！")
     }
    /*  窗口大小改变时 事件 */
     window.onresize = function () {
         console.log("窗口大小正在发送改变");
     }

2.表单事件

onsubmit 确认按钮被点击

onchange 文本框内容改变事件

oninput 文本框内容修改事件

oninvalid 获取表单未能提交时事件

onselect 当文本框内容被选中时

onfocus 文本框获得焦点事件

onblur 文本框失去焦点事件

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="###" method="get" id="myForm">
    <label>账号：</label><input type="text" id="username" value="默认值"><br>
    <label>密码：</label><input type="password" id="pwd" ><br>
    <input type="submit">
</form>


<script>

    var username = document.getElementById('username');
    var myForm = document.getElementById("myForm");

    //获得焦点时，改变背景颜色
    username.onfocus = function (){
        this.style.backgroundColor = 'pink';
    }

    //失去焦点时，改变背景颜色
    username.onblur = function (){
        this.style.backgroundColor = 'blue';
    }

    //内容改变事件
    username.onchange = function (){
        console.log(username.value);
    }
    //当内容改变时  立即将改变内容输出在控制台
    username.oninput = function (){
        console.log(username.value);
    }
    //获取表单未能提交时
    username.oninvalid = function(){
        console.log("请填写表单信息")    
    }
    //绑定提交事件
    myForm.onsubmit = function (){
        console.log("表单提交")
        return false;
    }

</script>
</body>
</html>

3.键盘事件

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('按下了回车');
        }
    }

4.鼠标事件

onclick 鼠标单击事件

ondbIclick 鼠标双击事件

鼠标移入，移出事件
mouseover / mouseout 支持事件冒泡

mouseenter/mouseleave 支持事件捕获

mousemove 鼠标移动事件

onmousewheel 鼠标滚动事件

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div onmouseenter="divMouseenter()"
     onmouseleave="divMouseleave()"
     style="width: 300px;height: 300px;background: blue">
</div>

<div id="box" style="overflow: scroll;width: 200px;height: 200px">
    春风得意马蹄疾，一日看尽长安花<br>
    春风得意马蹄疾，一日看尽长安花<br>
    春风得意马蹄疾，一日看尽长安花<br>
    春风得意马蹄疾，一日看尽长安花<br>
    春风得意马蹄疾，一日看尽长安花<br>
    春风得意马蹄疾，一日看尽长安花<br>
    春风得意马蹄疾，一日看尽长安花<br>
    春风得意马蹄疾，一日看尽长安花<br>
    春风得意马蹄疾，一日看尽长安花<br>
    春风得意马蹄疾，一日看尽长安花<br>
</div>


<script type="application/javascript">
    /* onmouseenter ： 可以阻止事件冒泡 */
    function divMouseenter() {
        console.log("当鼠标进入了当前的DIV");
    }
    /* onmouseleave ： 可以阻止事件冒泡 */
    function divMouseleave() {
        console.log("当鼠标移出了当前的DIV");
    }
    document.getElementById("box").onscroll = function () {
        console.log("当滚动元素的滚动条运行时");
    }
    /* 当鼠标的滚轮运行时 */
    window.onmousewheel=function (){
        console.log("当鼠标的滚轮运行时");
    }
    /*    当鼠标移动时*/
    window.onmousemove = function (){
        console.log("鼠标正在移动")
    }
</script>
</body>
</html>