1,鼠标焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p ondblclick="alert('hello!')">博客园</p>
    <input type="text" onfocus="func1()" onblur="func2()" value="请输入用户名" id="username">

    <script>
        function func1() {

            var uname=document.getElementById("username");
            uname.value=null;

        }
       // func1 鼠标左键点击触发焦点后的事件 点击输入框后输入框内的文字为空 等待输入
        function func2() {

            var uname=document.getElementById("username");
            if (uname.value.trim().length==0) {                          //.trim()方法是为了去掉value空格的
                uname.value = "请输入用户名";
            }
        }
        //func2 鼠标左键点击移开焦点后触发的事件  如果输入框有输入的内容 则无操作,如果VALUE没有数据为空则加上请输入用户名 提示
    </script>
</body>
</html>

==========================================================================================================================

2,鼠标移动事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: #48f444;
            height: 180px;
            width: 180px;
            text-align: center;
            font-size: 25px;
            line-height: 180px;
            margin: 2px;
        }
    </style>
</head>
<body>
    <div id="div1" onmousedown="func1()" onmousemove="func2()">博客园</div>
    <div id="div2" onmouseout="func3()" onmouseover="func4()">博客园</div>
<script>
    function fun1() {
        console.log("down");                                   //在区域内点下鼠标左键或右键 触发down 函数
    }
    function fun2() {
        console.log("move");                                    //在区域内移动光标 则触发move事件 func2()函数
    }
    function func3() {                                          // 鼠标移开区域则触发out事件 func3函数
        console.log("out");
    }
    function func4() {
        console.log("over")                                    // 鼠标进入区域后,触发over事件 func4函数c
     }
</script>
</body>
</html>
												


											
js event鼠标事件的更多相关文章
	

    
								
  1. JS  Event 鼠标拖拽事件
		
    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...
    
		
    2. 
						
  2. js的鼠标事件整理-------Day47
		
    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/marSmile_tbo/article/details/34202437 今天回来的有些晚了,实在是 ...
    
		
    3. 
						
  3. js基础 -----鼠标事件(按下 拖拽)
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    4. 
						
  4. 原生js添加鼠标事件的兼容性写法
		
    兼容pc和移动端,还兼容了surface平板. surface平板特别坑,既可以用鼠标也能用触摸屏,也就是说同时有touch事件和mouse事件. function addEvent(_target, ...
    
		
    5. 
						
  5. js 模拟鼠标事件
		
    <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8& ...
    
		
    6. 
						
  6. js event loop事件循环
		
    浏览器环境 以下两段代码是等价的.req对事件的回调设置,实际上就是当前主线程任务队列的任务. var req = new XMLHttpRequest(); req.open('GET', url) ...
    
		
    7. 
						
  7. js 动态绑定鼠标事件
		
    <script> function getElementsByClassName(n) { var classElements = [],allElements = document.ge ...
    
		
    8. 
						
  8. JS - 解决鼠标单击、双击事件冲突问题（原生js实现）
		
    由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次单击事件,原生的js不提供专门的双击事件. 因为业务原因,双击和单机都绑定了不同的业务,在双击的时候又触发了单机,影响了页面的正常显示 出现问 ...
    
		
    9. 
						
  9. opencv鼠标事件
		
    #include <opencv2\opencv.hpp> using namespace cv; struct mouse_para { cv::Mat org; cv::Mat img ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. GeoServer中GeoWebCache(GWC)的使用
			
    本文介绍GeoWebCache的使用方法,包括如何切缓存,访问缓存wms/wmts服务,如何复用栅格缓存等. 文章大部分内容转载自https://www.cnblogs.com/naaoveGIS/p ...
    
			
    2. 
						
  2. hosts是什么意思？Hosts文件有什么作用和功能？
			
    hosts是什么意思?Hosts文件有什么作用和功能? 熟悉网络的朋友们都会用到hosts文件,针对还不清楚hosts是什么意思以及hosts文件有什么功能和作用?针对此问题,本文就为大家进行解答   ...
    
			
    3. 
						
  3. 使用python-docx生成Word文档
			
    首先是安装python-docx:(centos环境) pip install python-docx 基本方法使用: from docx import Document from docx.shar ...
    
			
    4. 
						
  4. 【FAQ】Unable to start EmbeddedWebApplicationContext due to missing EmbeddedServlet
			
    原因: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spr ...
    
			
    5. 
						
  5. Linux下指定线程的名字
			
    为了能方便的区分一个进程中的每个线程,可以通过prctl()给每个线程取个名字.这样在会创建多个线程的程序执行过程中,就能知道一个pid或tid对应的是哪个线程,对调试程序有一定帮助. prctl是个 ...
    
			
    6. 
						
  6. springcloud微服务总结六
			
    SpringCloud实战7-Config分布式配置管理 分布式环境下的统一配置框架,已经有不少了,比如百度的disconf,阿里的diamand 官方文档对spring Cloud Config的描 ...
    
			
    7. 
						
  7. Spring学习笔记（六）—— SSH整合
			
    一.整合原理 二.整合步骤 2.1 导包 [hibernate] hibernate/lib/required hibernate/lib/jpa 数据库驱动 [struts2] struts-bla ...
    
			
    8. 
						
  8. [HNOI2014]抄卡组
			
    [Luogu3234] [LOJ2208] 题解及代码 锻炼哈希码力的一道题 , 具体细节见代码 #include<cstdio> #include<cstring> #inc ...
    
			
    9. 
						
  9. varchar和varchar2的区别
			
    varchar是标准sql里面的. varchar2是oracle提供的独有的数据类型. varchar对于汉字占两个字节,对于英文是一个字节,占的内存小,varchar2都是占两个字节. varch ...
    
			
    10. 
						
  10. LOJ6502. 「雅礼集训 2018 Day4」Divide（构造＋dp）
			
    题目链接 https://loj.ac/problem/6502 题解 中间一档部分分提示我们将所有的 \(w_i\) 排序. 考虑如果我们能构造出这样一个 \(w_i\) 的序列,使得该序列满足:对 ...
    
			
    11.