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. day5学python  基础+装饰器内容
			
    基础+装饰器内容 递归特性# 1.必须有一个明确的结束条件# 2.每次进入更深一层递归时,问题规模相比上次递归应有所减少# 3.递归效率不高 def run(n): print(n) if int(n ...
    
			
    2. 
						
  2. Python基本数据类型集合、格式化、函数
			
    一.变量总结 1.1 变量定义 记录某种状态或者数值,并用某个名称代表这个数值或状态. 1.2 变量在内存中的表现形式 Python 中一切皆为对象,数字是对象,列表是对象,函数也是对象,任何东西都是 ...
    
			
    3. 
						
  3. n阶行列式算法（c程序）
			
    #include<stdio.h> #include<math.h> #define N 100 //N比输入的阶数大即可 int main() {   int n,a[N][ ...
    
			
    4. 
						
  4. SDUT OJ 数据结构上机测试1：顺序表的应用
			
    数据结构上机测试1:顺序表的应用 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descri ...
    
			
    5. 
						
  5. $(xx).load()同步
			
    这是由于 load 加载时并不是同步的,是异步的.在你点击执行 load 时,在load异步处理还没完成时,当然,就是调出了原来 #show 的内容了,当你第二次当点击时,原来第一次点击的 load异 ...
    
			
    6. 
						
  6. feign调用过程注意事项
			
    Feign是Netflix开发的声明式.模板化的HTTP客户端, Feign可以帮助我们更快捷.优雅地调用HTTP API. 在Spring Cloud中,使用Feign非常简单——创建一个接口,并在 ...
    
			
    7. 
						
  7. flask之werkzeug
			
    密码存储的主要形式: 明文存储:肉眼就可以识别,没有任何安全性. 加密存储:通过一定的变换形式,使得密码原文不易被识别. 密码加密的几类方式: 明文转码加密:BASE64, 7BIT等,这种方式只是个 ...
    
			
    8. 
						
  8. Mui 选项卡 tab 高度 没有自适应....
			
    因为项目中 用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的 思路 是  用一个值 保存 当前 的 高度... 当 点击其他 t ...
    
			
    9. 
						
  9. 【算法笔记】B1030 完美数列（三种方法）
			
    1030 完美数列 (25 分) 给定一个正整数数列,和正整数 p,设这个数列中的最大值是 M,最小值是 m,如果 M≤mp,则称这个数列是完美数列. 现在给定参数 p 和一些正整数,请你从中选择尽可 ...
    
			
    10. 
						
  10. URL 地址传中文,转码
			
    地址传中文,转码 http://community.csdn.net/Expert/topic/4541/4541877.xml?temp=.57688541.设置web.config文件.<s ...
    
			
    11.