• JavaScript常用事件详解

    目录

    1.onclick事件

    2.onmouseover事件和onmouseout事件

    3.onblur事件和onfocus事件

    4. onreset事件和onsubmit事件

    5.onchange事件

    1.onclick事件

    onclick 事件会在元素被点击时发生。

    代码示例： 
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initialscale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.       
    11.     <button onclick="demo()">点我⼀下button>
    12. body>
    13. <script>
    14.     function demo(){
    15.         alert("哎呦！我被单击了~~");
    16.    }
    17. script>
    18. html>

    运行结果：

     2.onmouseover事件和onmouseout事件

    onmouseover 事件是指⿏标移动到指定元素上⽅时触发的事件

    onmouseout 事件是⿏标从元素上离开时触发

    代码示例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initialscale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.      <div style="background-color: palegreen;" onmouseover="demo01()" onmouseout="demo02()">学习js事件div>
    11. body>
    12. <script>
    13.     // onmouseover事件
    14.     function demo01(){
    15.         alert("鼠标移动到div上了");
    16.     }
    17.  
    18.     // onmouseout事件
    19.     function demo02(){
    20.         alert("鼠标离开div了");
    21.     }
    22. script>
    23. html>

    运行结果：

    3.onblur事件和onfocus事件

    onblur  当前元素失去焦点时触发此事件
    onfocus  当某个元素获得焦点时触发此事件

    示例代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initialscale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <input type="text" onblur="demo04()" onfocus="demo05()">
    11. body>
    12. <script>
    13.     // onblur事件
    14.     function demo04(){
    15.        alert("文本框失去焦点");
    16.     }
    17.  
    18.     // onfocus事件
    19.     function demo05(){
    20.         alert("文本框获得焦点");
    21.     }
    22. script>
    23. html>

    4. onreset事件和onsubmit事件

    onreset    当点击表单中的重置按钮时触发此事件

    onsubmit    当提交表单时触发此事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Documenttitle>
    6. head>
    7. <body>
    8. <form id="form1" action="">
    9.     <input type="text" name="username" placeholder="请输入用户名">
    10.     <button type="submit" name="doSubmit">提交button>
    11.     <button type="reset" name="soReset">重置button>
    12. form>
    13.     <script type="text/javascript">
    14.     var f = document.getElementById('form1');
    15.     f.onsubmit = function(){
    16.         if(this.username.value == ''){
    17.             alert('请输入用户名');
    18.             return false;
    19.         }
    20.     }
    21.     f.onreset = function(){
    22.         return confirm('你确定要重置？');
    23.     }
    24.     script>
    25. body>
    26. html>

     5.onchange事件

    onchange 事件表示在域的内容被改变时触发的事件

    示例代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initialscale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     搜索：<input type="search" onchange="demo03()">
    11. body>
    12. <script>
    13.     // onchange事件
    14.     function demo03(){
    15.         console.log("搜索框的内容被改变了");
    16.    }
    17. script>
    18. html>

     运行结果：

  • 相关阅读:
    在T507开发板上移植ubuntu系统
    MySql的基础讲解
    R | R包默认安装路径的查看及修改
    js（javascript）中关于查找与替换常用的实用方法
    ARM作业，M4
    主成分分析的基本原理
    vue.js 进行初始化遇到的关于core-js的错误
    将项目部署到Linux系统上
    MQTT服务器搭建
    【毕业设计】60-基于ZigBee无线智能消防\烟雾报警逃生系统设计（原理图工程、源代码、低重复率参考文档、实物图）
  • 原文地址：https://blog.csdn.net/weixin_50965858/article/details/127953444