JavaScript中的onblur（失去焦点）应用

文章目录

• • 概要
  • 整体知识
  • 代码展示
  • 效果展示

    概要

    onblur 事件会在对象失去焦点时发生。

    Onblur 经常用于Javascript验证代码，一般用于表单输入框。

    提示：onblur 相反事件为 onfocus 事件 。

    整体知识

    1.事件—通过js监听元素的行为

    2.常见的事件：

    2.1 鼠标事件

    onclick— 鼠标左键单击事件

    ondblclick— 鼠标左键双击事件

    onmouseover— 鼠标移入事件

    onmouseout-- 鼠标移出事件

    onmousemove— 鼠标移动事件

    onmousedown— 鼠标按下事件

    onmouseup— 鼠标抬起事件

    2.2 键盘事件

    onkeydown— 键盘按下事件

    onkeyup— 键盘抬起事件

    onkeypress— 键盘按下事件

    2.3 表单事件

    onfocus-- 获取焦点事件

    onblur— 失去焦点事件

    onchange— 内容改变事件

    oninput---- 内容改变事件

    onsubmit— 提交事件

    2.4 其他事件

    onload— 页面加载事件

                    事件三要素：
                1.事件源：触发事件的元素
                2.注册事件：触发的行为
                3.事件处理程序：事件触发后要执行的代码
            
            注册事件事件的方式：
            方式1：
                事件对象.on事件名 = function(){
                    事件处理程序
                }
            方式2：----推荐使用
                事件对象.addEventListener('事件名',function(){
                    事件处理程序
                })
    

    代码展示

    下面展示一些代码片

    
      
        
        
        
        Document
        
          div {
            width: 600px;
            margin: 100px auto;
          }
          .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
          }
          .wrong {
            display: inline-block;
            font-size: 12px;
            color: red;
            background-image: url(images/wrong.png);
          }
          .right {
            display: inline-block;
            font-size: 12px;
            color: green;
            background-image: url(images/right.png);
          }
        
      
      
        
          
          
    请输入6~16位密码
        
        
          // 1.首先判断的事件是表单失去焦点 onblur
          // 2.如果输入正确则提示正确的信息颜色为绿色小图标变化
          // 3.如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
          // 3.因为里面变化样式较多，我们采取className修改样式
          let text = document.querySelector("input");
          let worn = document.querySelector("p");
          text.onblur = function () {
            if (this.value.length >= 6 && this.value.length