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. constexpr函数------c++ primer
			
    constexpr函数是指能用于常量表达式的函数.定义constexpr函数的方法有其他函数类似,不过要遵循几项约定:函数的返回值类型及所以形参的类型都是字面值类型,而且函数体中必须有且只有一条ret ...
    
			
    2. 
						
  2. 在Linux环境下的卸载Oracle11G操作
			
    1.使用SQL*PLUS停止数据库[oracle@OracleTest oracle]$ sqlplus /nolog SQL> connect / as sysdba SQL> shut ...
    
			
    3. 
						
  3. vi/vim使用总结
			
    第一部份:一般模式可用的按钮说明,光标移动.复制粘贴.搜索取代等 移动光标的方法: h 或 向左箭头键(←) 光标向左移动一个字符 j 或 向下箭头键(↓) 光标向下移劢一个字符 k 或 向上箭头键( ...
    
			
    4. 
						
  4. 1233: 传球游戏 [DP]
			
    1233: 传球游戏 [DP] 时间限制: 1 Sec 内存限制: 128 MB 提交: 4 解决: 3 统计 题目描述 上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做 ...
    
			
    5. 
						
  5. 在虚拟机中连接oracle数据库报错ORA-12154，其他服务器连接无问题
			
    在一台服务器上使用sqlplus登录oracle数据库,cmd->sqlplus->name/passwd@orcl2登录某个数据库用户,提示ORA-12154.使用当前服务器的PLSQL ...
    
			
    6. 
						
  6. 《Andrew Ng深度学习》笔记1
			
    深度学习概论 1.什么是神经网络? 2.用神经网络来监督学习 3.为什么神经网络会火起来? 1.什么是神经网络? 深度学习指的是训练神经网络.通俗的话,就是通过对数据的分析与计算发现自变量与因变量的映 ...
    
			
    7. 
						
  7. Eclipse 使用TFS
			
    Install Soft , –> add http://dl.microsoft.com/eclipse/tfs   form:http://msdn.microsoft.com/en-us/ ...
    
			
    8. 
						
  8. Flume自定义拦截器（Interceptors）或自带拦截器时的一些经验技巧总结（图文详解）
			
    不多说,直接上干货! 一.自定义拦截器类型必须是:类全名$内部类名,其实就是内部类名称 如:zhouls.bigdata.MySearchAndReplaceInterceptor$Builder 二 ...
    
			
    9. 
						
  9. springcloud微服务 总结一
			
    一 什么是微服务 译文: 微服务架构是一种架构模式,它提倡将单一应用程序划分成一组小的服务,服务之间互相协调.互相配合,为用户提供最终价值.每个服务运行在其独立的进程中,服务与服务间采用轻量级的通信机 ...
    
			
    10. 
						
  10. 12.谈谈this对象的理解
			
    1.谈谈this对象的理解? 2.this指向问题   Javascript理解this对象 this是函数运行时自动生成的一个内部对象,只能在函数内部使用,但总指向调用它的对象. 通过以下几个例子加 ...
    
			
    11.