事件类型(鼠标事件）

最新推荐文章于 2023-10-18 14:03:43 发布

虚诚

最新推荐文章于 2023-10-18 14:03:43 发布

阅读量238

点赞数

分类专栏： js的事件类型文章标签： js html

本文链接：https://blog.csdn.net/qq_43614064/article/details/105722319

版权

js的事件类型专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

List item

其中的onload也是很常用的，比如你写一段代码，如果想把

window.onload=function(){}

这样就不会因为顺序问题报错，因为这一句代码意味着页面加载时执行，也就是等整个页面加载完成后才执行这一句

List item
onfoucs 获得焦点时触发
onblur失去焦点时触发
例子：

 <script>
            window.onload=function(){
                var phone=document.getElementById("phone"),
                tip=document.getElementById("tip");
                phone.onfocus=function(){
                    tip.style.display='block';
                }
            
                phone.onblur=function(){
                    //value用于获取表单元素的值
                    var phonevalue=this.value;
                    if(phonevalue.length==11&&isNaN(phonevalue)==false){
                       tip.innerHTML='<img src="yes.jpg">';
                    }
                    else{
                        tip.innerHTML='<img src="no.jpg">';
                    }
                }
            }
        </script>
    </head>
    <body>
        <div class="box">
            <div class="left" >
                <input type="text" id="phone" placeholder="请输入手机号码" >
            </div>
            <div class="tip" id="tip" >请输入有效的手机号码</div>
        </div>
    </body>

上面的代码块是当你的光标在文本框内，触发事件，离开文本框，触发事件。
其中onfocus的用法如下图；

在这里插入图片描述

List item
onchange域的内容改变时发生，一般用于select 表单元素，checkbox复选框或radio
例子：

<script>
           window.onload=init;
           function init(){
               var menu=document.getElementById("menu");
                  menu.onchange=function(){
                   var bgcolor=this.value;
                  if (bgcolor=="")return;
                  else{
                      document.body.style.background=bgcolor;
                  }
               }
           } 
        </script>
    </head>
    <body>
        <div class="box">
            请选择你喜欢的背景色：
            <select name="" id="menu">
                <option value="">请选择：</option>
                <option value="#f00">红色</option>
                <option value="#0f0">绿色</option>
                <option value="#00f">蓝色</option>
                <option value="#ff0">黄色</option>
                <option value="#ccc">灰色</option>
                
            </select>
        </div>
    </body>

List item
onsubmit表单中确认按纽被点击时发生，onsubmit事件虽然是表单提交时触发，但onsubmit不是加在提交按钮上的，而是加在表单上的。

在这里插入图片描述

 <style>
           .box{width: 200px;height: 200px;background: #f00;}
        </style>
        <script>
            window.onload=function(){
                var box=document.getElementById("box");
          box.onmousedown=function(){
              console.log("按下");
            }
            box.onmouseup=function(){
              console.log("松开");
            }
            box.onmousemove=function(){
              console.log("移动");
            }
            box.onclick=function(){
              console.log("点击");
            }
          }
          
        </script>
    </head>
    <body>
        <div class="box" id="box" >  
        </div>
    </body>