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. thedao
			
    TheDao 简化版解释 the Dao 合约 contract f1{ function transfer() { if (acccount[m]>=100) { m.send(100) ac ...
    
			
    2. 
						
  2. 二、搭建SpringBoot项目
			
    与其说是搭建,还不如说去下载...(注意,在此之前要确保你的3000块钱的笔记本上安装了JDK8+已经最新的相对较新的maven:apache-maven-3.6.0,至于JDK以及maven的相关安 ...
    
			
    3. 
						
  3. C# LINQ（4）
			
    where作为LINQ的条件关键字. where的右面是表达式 表达式可以方法返回值,但是where的右面最终是一个可检测真假的表达式 代码: static void Main(string[] ar ...
    
			
    4. 
						
  4. 【转】远程桌面关闭后TeamViewer不能连接
			
    源地址:http://www.cnblogs.com/qk2014/p/9274852.html 1.本地安装TeamViewer,完成后如下: 2.远程服务器也安装TeamViewer 在本地Tea ...
    
			
    5. 
						
  5. js 有用信息集
			
    1.java.cookie.js 库:轻易操作cookie 2.jquery.form.js 库:通过ajaxForm,ajaxsubmit 两个函数,将form转为ajax提交方式:https:// ...
    
			
    6. 
						
  6. redux超易学三篇之三（一个逻辑完整的react-redux)
			
    配合源代码学习吧~ : 我是源代码 这一分支讲的是 如何完整地(不包含优化,也没有好看的页面) 搭建一个 增删改查 的 react-redux 系统 不同于上一节的 react-redux,这里主要采 ...
    
			
    7. 
						
  7. python学习之路---day25（  网络编程基础和初识socket）
			
    基本网络知识和初识socket一:基本知识 网线:传输电信号 集线器:将所有连接到集线器的网络设备连通起来 交换机: 升级版的集线器 网卡:接受电信号 MAC地址:物理地址: 8C-88-4B-88- ...
    
			
    8. 
						
  8. Hibernate 环境配置和依赖添加(使用java web和普通javaSE工程)
			
    1.Hibernate依赖包的添加 File---->Project Structure,按照如图所示操作,导入所依赖的jar包. 2.生成hibernate.hbm.xml的配置文件 (1)点 ...
    
			
    9. 
						
  9. CF248E Piglet's Birthday(概率dp)
			
    题面 luogu CodeForces 题解 \(orz\) yyb 转移蜜罐其实是吓唬人的...... 转移的蜜罐都是尝试过的,所有只关心当前架子上的蜜罐数 设\(f[i][j]\)表示第i个货架有 ...
    
			
    10. 
						
  10. Luogu P1131 [ZJOI2007]时态同步 树形DP
			
    要自下向上调整,尽可能用一个道具修改多个: 搜的时候记录叶节点的最大深度,减一下就好了. #include<cstdio> #include<iostream> #includ ...
    
			
    11.