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;
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>