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. OO  面向对象的三大特性
			
    面向对象的三大特性 一.面向对象特性——封装: 概念:把对象所能操作的信息进行封装: 封装作用: 1.减少代码之间的耦合: 2.提供统一的访问接口,内部修改不影响外部的调用:(开放封闭原则) 二.面向 ...
    
			
    2. 
						
  2. C# 接口（2）
			
    接口的实现方式. 接口的实现分两种: 1 显示实现接口 2 实现接口. 我们前面所得的接口的实现均为实现接口.也就是第二种方式.那么我们来来看第第一种实现方式: interface IHuman {  ...
    
			
    3. 
						
  3. 上课总结-数据库Chapter2： 关系数据库
			
    Chapter2: 关系数据库 一.搞懂主键 外键关系 主键(主码):能唯一标识一个元组的某一属性组. 外键:不是这组数据的主键 但是另一组数据的唯一主键(当这组数据的主键有2个时 可以作为外键) 例 ...
    
			
    4. 
						
  4. 趣图：TCP 与 UDP 的差别
			
      趣图:程序猿和运维狗的工作日常…… 趣图:Java 和 PHP 之间的战斗
    
			
    5. 
						
  5. go语言排序
			
    冒泡: package main import ( "fmt" ) func BubbleSort(arr []int) []int { // 改进的冒泡排序 num := len ...
    
			
    6. 
						
  6. django中ModelForm解决多表单组合显示问题
			
    一.多表单组合显示问题 在项目中用ModelForm生成页面时 当有多表单组合显示时,会显示全部的关联表单数据. 而在实际项目中可能会出现只想让用户选择部分数据,这时候这样的显示就有问题. 二.问题解 ...
    
			
    7. 
						
  7. Python实现——决策树(部分函数/连续数据)
			
    由于上一例的实现中只针对了离散数据,为了扩充处理范围,我实现了一下对线性数据的简单处理,在其中我选择用中位数作为指标,平均数.众数等等其他数据在我看来异曲同工,最终也都会有较相似的结构. 求连续数据的 ...
    
			
    8. 
						
  8. Shell脚本——初识
			
    1.在一般情况下,人们并不区分 Bourne Shell 和 Bourne Again Shell,所以,像 #!/bin/sh,它同样也可以改为 #!/bin/bash. #! 告诉系统其后路径所指 ...
    
			
    9. 
						
  9. SDUT OJ 数据结构实验之图论四：迷宫探索
			
    数据结构实验之图论四:迷宫探索 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descrip ...
    
			
    10. 
						
  10. bootstrap的使用2
			
    表单控件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
    
			
    11.