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. C#英文面试常见问题[转]
			
    I was reading a post about some common C# interview questions, and thought I'd share some of mine. T ...
    
			
    2. 
						
  2. Ajax GET
			
    $ajax的post请求提交方式: Controller: @RequestMapping("/emps") @ResponseBody public Msg getEmps(@R ...
    
			
    3. 
						
  3. 趣图：向客户介绍的产品VS实际开发的产品
			
      趣图:客户需求 vs 最终产品 趣图:你永远想不到用户怎么使用你的产品
    
			
    4. 
						
  4. Spark操作—aggregate、aggregateByKey详解
			
    https://blog.csdn.net/u013514928/article/details/56680825 1. aggregate函数 将每个分区里面的元素进行聚合,然后用combine函数 ...
    
			
    5. 
						
  5. jenkins安装maven工具
			
    下载maven工具,然后解压到/usr/local下面 然后在jenkins上面添加maven工具.指定他的设置配置文件(全局) 指定maven的目录位置 应用保存即可 !!! 虽然maven安装简单 ...
    
			
    6. 
						
  6. javascrip 中排序的函数怎么理解
			
    其中s是数组[888,2222,9,4]:我不明白sort函数中参数是如何作用的,function中的a和b又是干什么的? 那个function的作用就是比较两个数的大小用的,然后返回结果的正负作为排 ...
    
			
    7. 
						
  7. 不带 www 跳转 到 带 www 网站..
			
    IIS: <rule name="已导入的规则 1-1" stopProcessing="true"> <match url="^( ...
    
			
    8. 
						
  8. 域名dns 查询
			
    腾讯云 DNS 使用不同套餐版本的解析分别为不同集群,每种集群对应的 DNS 地址是不同的: 解析套餐版本 DNS 地址 备注 免费 DNS 地址 f1g1ns1.dnspod.net/f1g1ns2 ...
    
			
    9. 
						
  9. gym 100589A queries on the Tree                            树状数组 + 分块
			
    题目传送门 题目大意: 给定一颗根节点为1的树,有两种操作,第一种操作是将与根节点距离为L的节点权值全部加上val,第二个操作是查询以x为根节点的子树的权重. 思路: 思考后发现,以dfs序建立树状数 ...
    
			
    10. 
						
  10. Codeforces Round #462 (Div. 2), problem: (C) A Twisty Movement （求可以转一次区间的不递增子序列元素只有1，2）
			
    题目意思: 给长度为n(n<=2000)的数字串,数字只能为1或者2,可以将其中一段区间[l,r]翻转,求翻转后的最长非递减子序列长度. 题解:求出1的前缀和,2的后缀和,以及区间[i,j]的最 ...
    
			
    11.